259 lines
9.0 KiB
TypeScript
259 lines
9.0 KiB
TypeScript
import React from "react";
|
|
import {
|
|
View,
|
|
Text,
|
|
ScrollView,
|
|
TouchableOpacity,
|
|
useColorScheme,
|
|
Switch,
|
|
} from "react-native";
|
|
import { SafeAreaView } from "react-native-safe-area-context";
|
|
import { Ionicons } from "@expo/vector-icons";
|
|
|
|
interface SettingRowProps {
|
|
icon: keyof typeof Ionicons.glyphMap;
|
|
label: string;
|
|
value?: string;
|
|
toggle?: boolean;
|
|
toggleValue?: boolean;
|
|
onToggle?: (v: boolean) => void;
|
|
onPress?: () => void;
|
|
accent?: string;
|
|
}
|
|
|
|
|
|
{/*// TODO add logic idk im still missing a home/login screen*/}
|
|
|
|
|
|
|
|
function SettingRow({
|
|
icon,
|
|
label,
|
|
value,
|
|
toggle,
|
|
toggleValue,
|
|
onToggle,
|
|
onPress,
|
|
accent,
|
|
}: SettingRowProps) {
|
|
const scheme = useColorScheme();
|
|
const dark = scheme === "dark";
|
|
const iconColor = accent ?? (dark ? "#706D67" : "#8A8278");
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
activeOpacity={onPress ? 0.7 : 1}
|
|
className={`flex-row items-center px-4 py-3.5 border-b ${
|
|
dark ? "border-border-dark" : "border-border-light"
|
|
}`}
|
|
>
|
|
<View
|
|
className="w-8 h-8 rounded-xl items-center justify-center mr-3"
|
|
style={{ backgroundColor: iconColor + "18" }}
|
|
>
|
|
<Ionicons name={icon} size={16} color={iconColor} />
|
|
</View>
|
|
<Text
|
|
className={`flex-1 text-sm font-sans ${
|
|
dark ? "text-ink-dark" : "text-ink-light"
|
|
}`}
|
|
>
|
|
{label}
|
|
</Text>
|
|
{toggle ? (
|
|
<Switch
|
|
value={toggleValue}
|
|
onValueChange={onToggle}
|
|
trackColor={{
|
|
true: dark ? "#E07B45" : "#C4622D",
|
|
false: dark ? "#2C2A27" : "#E8E2D5",
|
|
}}
|
|
thumbColor="#FFFFFF"
|
|
/>
|
|
) : value ? (
|
|
<Text
|
|
className={`text-sm font-sans ${
|
|
dark ? "text-muted-dark" : "text-muted-light"
|
|
}`}
|
|
>
|
|
{value}
|
|
</Text>
|
|
) : (
|
|
<Ionicons
|
|
name="chevron-forward"
|
|
size={14}
|
|
color={dark ? "#706D67" : "#8A8278"}
|
|
/>
|
|
)}
|
|
</TouchableOpacity>
|
|
);
|
|
}
|
|
|
|
function SectionLabel({ title }: { title: string }) {
|
|
const dark = useColorScheme() === "dark";
|
|
return (
|
|
<Text
|
|
className={`px-4 pt-5 pb-2 text-xs font-sans font-bold tracking-widest uppercase ${
|
|
dark ? "text-muted-dark" : "text-muted-light"
|
|
}`}
|
|
>
|
|
{title}
|
|
</Text>
|
|
);
|
|
}
|
|
|
|
export default function Profile() {
|
|
const [notifications, setNotifications] = React.useState(true);
|
|
const [digest, setDigest] = React.useState(false);
|
|
const scheme = useColorScheme();
|
|
const dark = scheme === "dark";
|
|
|
|
return (
|
|
<SafeAreaView
|
|
className={`flex-1 ${dark ? "bg-obsidian-200" : "bg-parchment-50"}`}
|
|
>
|
|
|
|
<ScrollView
|
|
contentContainerStyle={{ paddingBottom: 48 }}
|
|
showsVerticalScrollIndicator={false}
|
|
>
|
|
{/* Avatar + name block */}
|
|
<View
|
|
className={`items-center pt-8 pb-6 mx-4 mt-4 rounded-3xl ${
|
|
dark ? "bg-obsidian-100" : "bg-surface-light"
|
|
}`}
|
|
style={{
|
|
shadowColor: dark ? "#000" : "#1A1714",
|
|
shadowOpacity: dark ? 0.35 : 0.06,
|
|
shadowOffset: { width: 0, height: 2 },
|
|
shadowRadius: 10,
|
|
elevation: 3,
|
|
}}
|
|
>
|
|
{/*// TODO*/}
|
|
{/* Avatar placeholder */}
|
|
<View
|
|
className={`w-20 h-20 rounded-full items-center justify-center mb-3 ${
|
|
dark ? "bg-accent-dark/20" : "bg-accent/10"
|
|
}`}
|
|
>
|
|
<Text className="text-3xl">📰</Text>
|
|
</View>
|
|
<Text
|
|
className={`text-xl font-display font-bold ${
|
|
dark ? "text-ink-dark" : "text-ink-light"
|
|
}`}
|
|
>
|
|
Get Name here idk
|
|
</Text>
|
|
<Text
|
|
className={`text-sm font-sans mt-1 ${
|
|
dark ? "text-muted-dark" : "text-muted-light"
|
|
}`}
|
|
>
|
|
{/*// TODO*/}
|
|
aaa@aaaq.com
|
|
</Text>
|
|
|
|
{/* Stats row */}
|
|
<View className="flex-row mt-5 gap-8">
|
|
{[
|
|
//TODO add stats tracked
|
|
{ label: "Subscribed", value: "5" },
|
|
{ label: "Read", value: "128" },
|
|
{ label: "Saved", value: "34" },
|
|
].map((stat) => (
|
|
<View key={stat.label} className="items-center">
|
|
<Text
|
|
className={`text-xl font-display font-bold ${
|
|
dark ? "text-ink-dark" : "text-ink-light"
|
|
}`}
|
|
>
|
|
{stat.value}
|
|
</Text>
|
|
<Text
|
|
className={`text-xs font-sans mt-0.5 ${
|
|
dark ? "text-muted-dark" : "text-muted-light"
|
|
}`}
|
|
>
|
|
{stat.label}
|
|
</Text>
|
|
</View>
|
|
))}
|
|
</View>
|
|
</View>
|
|
|
|
{/* Settings sections */}
|
|
<View
|
|
className={`mx-4 mt-5 rounded-2xl overflow-hidden border ${
|
|
dark
|
|
? "bg-obsidian-100 border-border-dark"
|
|
: "bg-surface-light border-border-light"
|
|
}`}
|
|
>
|
|
<SectionLabel title="Notifications" />
|
|
<SettingRow
|
|
icon="notifications-outline"
|
|
label="Push notifications"
|
|
toggle
|
|
toggleValue={notifications}
|
|
onToggle={setNotifications}
|
|
accent={dark ? "#E07B45" : "#C4622D"}
|
|
/>
|
|
<SettingRow
|
|
icon="mail-outline"
|
|
label="Daily digest email"
|
|
toggle
|
|
toggleValue={digest}
|
|
onToggle={setDigest}
|
|
accent={dark ? "#5E9EF4" : "#3B7DD8"}
|
|
/>
|
|
|
|
<SectionLabel title="Subscriptions" />
|
|
<SettingRow
|
|
icon="bookmark-outline"
|
|
label="Manage subscriptions"
|
|
onPress={() => {}}
|
|
accent={dark ? "#4EC992" : "#2E9E6B"}
|
|
/>
|
|
|
|
<SectionLabel title="Account" />
|
|
<SettingRow
|
|
icon="person-outline"
|
|
label="Edit profile"
|
|
onPress={() => {}}
|
|
/>
|
|
|
|
{/*
|
|
<SettingRow
|
|
|
|
icon="lock-closed-outline"
|
|
label="Privacy settings"
|
|
onPress={() => {}}
|
|
/>
|
|
*/}
|
|
<SettingRow
|
|
icon="help-circle-outline"
|
|
label="Help & support"
|
|
onPress={() => {}}
|
|
/>
|
|
</View>
|
|
|
|
{/* Sign out */}
|
|
<TouchableOpacity
|
|
className={`mx-4 mt-4 py-4 rounded-2xl items-center border ${
|
|
dark
|
|
? "border-red-900/40 bg-red-950/20"
|
|
: "border-red-200 bg-red-50"
|
|
}`}
|
|
activeOpacity={0.7}
|
|
>
|
|
<Text className="text-sm font-sans font-semibold text-red-500">
|
|
Sign out
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</ScrollView>
|
|
</SafeAreaView>
|
|
);
|
|
} |