109 lines
2.7 KiB
TypeScript
109 lines
2.7 KiB
TypeScript
import { MaterialCommunityIcons } from "@expo/vector-icons";
|
|
import { Switch, Text, TouchableOpacity, View } from "react-native";
|
|
|
|
import { useTheme } from "@/lib/theme";
|
|
|
|
type IconName = React.ComponentProps<typeof MaterialCommunityIcons>["name"];
|
|
|
|
type RightKind = "chevron" | "switch" | "value" | "none";
|
|
|
|
type SettingsRowProps = {
|
|
icon: IconName;
|
|
title: string;
|
|
subtitle?: string;
|
|
right?: RightKind;
|
|
/** For `right: "value"` — the string shown on the trailing side. */
|
|
value?: string;
|
|
/** For `right: "switch"`. */
|
|
switchValue?: boolean;
|
|
onSwitchChange?: (value: boolean) => void;
|
|
onPress?: () => void;
|
|
/** Red accent — used for the emergency-call row. */
|
|
danger?: boolean;
|
|
};
|
|
|
|
/** A single row in the Settings screen. Born dark-aware. */
|
|
export const SettingsRow = ({
|
|
icon,
|
|
title,
|
|
subtitle,
|
|
right = "none",
|
|
value,
|
|
switchValue,
|
|
onSwitchChange,
|
|
onPress,
|
|
danger = false,
|
|
}: SettingsRowProps) => {
|
|
const { isDark } = useTheme();
|
|
const interactive = right === "chevron" || right === "value";
|
|
|
|
const content = (
|
|
<View className="flex-row items-center py-3.5">
|
|
<View
|
|
className={`w-10 h-10 rounded-full items-center justify-center mr-3.5 ${
|
|
danger
|
|
? "bg-rose-500/15"
|
|
: "bg-neutral-100 dark:bg-neutral-800"
|
|
}`}
|
|
>
|
|
<MaterialCommunityIcons
|
|
name={icon}
|
|
size={20}
|
|
color={danger ? "#e11d48" : isDark ? "#e5e5e5" : "#404040"}
|
|
/>
|
|
</View>
|
|
|
|
<View className="flex-1">
|
|
<Text
|
|
className={`text-[15px] font-JakartaSemiBold ${
|
|
danger ? "text-rose-600 dark:text-rose-400" : "text-black dark:text-white"
|
|
}`}
|
|
>
|
|
{title}
|
|
</Text>
|
|
|
|
{subtitle ? (
|
|
<Text className="text-xs font-Jakarta text-general-200 dark:text-neutral-400 mt-0.5">
|
|
{subtitle}
|
|
</Text>
|
|
) : null}
|
|
</View>
|
|
|
|
{right === "switch" ? (
|
|
<Switch
|
|
value={switchValue}
|
|
onValueChange={onSwitchChange}
|
|
trackColor={{ false: "#d4d4d4", true: "#0286ff" }}
|
|
/>
|
|
) : null}
|
|
|
|
{right === "value" ? (
|
|
<Text className="text-sm font-JakartaMedium text-general-200 dark:text-neutral-400 mr-1">
|
|
{value}
|
|
</Text>
|
|
) : null}
|
|
|
|
{right === "chevron" ? (
|
|
<MaterialCommunityIcons
|
|
name="chevron-right"
|
|
size={22}
|
|
color={isDark ? "#737373" : "#a3a3a3"}
|
|
/>
|
|
) : null}
|
|
</View>
|
|
);
|
|
|
|
if (right === "switch" || !interactive || !onPress) {
|
|
return <View className="px-4">{content}</View>;
|
|
}
|
|
|
|
return (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
activeOpacity={0.6}
|
|
className="px-4"
|
|
>
|
|
{content}
|
|
</TouchableOpacity>
|
|
);
|
|
}; |