1import type { ComponentProps } from "react";
2import { Platform, Pressable } from "react-native";
3
4import { AppActivityIndicator } from "../../../components/AppActivityIndicator";
5import { SymbolView } from "../../../components/AppSymbol";
6import { AppText as Text } from "../../../components/AppText";
7import { MaterialListRow } from "../../../components/MaterialListRow";
8import { cn } from "../../../lib/cn";
9
10export function SettingsActionRow(props: {
11 readonly icon: ComponentProps<typeof SymbolView>["name"];
12 readonly label: string;
13 readonly tone?: "default" | "danger";
14 readonly disabled?: boolean;
15 readonly loading?: boolean;
16 readonly onPress: () => void;
17}) {
18 const danger = props.tone === "danger";
19 const textClassName = danger ? "tabular-nums text-danger-foreground" : "text-foreground";
20 const iconColorClassName = danger ? "accent-danger-foreground" : "accent-icon";
21 const icon = (
22 <SymbolView
23 name={props.icon}
24 size={Platform.OS === "android" ? 24 : 22}
25 tintColorClassName={iconColorClassName}
26 type="monochrome"
27 weight="regular"
28 />
29 );
30 const spinner = props.loading ? (
31 <AppActivityIndicator colorClassName={iconColorClassName} />
32 ) : null;
33
34 if (Platform.OS === "android") {
35 return (
36 <MaterialListRow
37 className="bg-grouped-card"
38 title={props.label}
39 titleClassName={textClassName}
40 leading={icon}
41 trailing={spinner}
42 disabled={props.disabled}
43 onPress={props.onPress}
44 />
45 );
46 }
47
48 return (
49 <Pressable
50 accessibilityRole="button"
51 disabled={props.disabled}
52 onPress={props.onPress}
53 className="flex-row items-center gap-4 p-4 disabled:opacity-40"
54 >
55 {icon}
56 <Text className={cn("flex-1 text-lg", textClassName)}>{props.label}</Text>
57 {spinner}
58 </Pressable>
59 );
60}