1import { cn } from "../lib/cn";
2import { Pressable } from "react-native";
3
4import { SymbolView, type AppSymbolName } from "./AppSymbol";
5
6const VARIANT_CLASS_NAMES = {
7 standard: ["", "accent-foreground"],
8 primary: ["rounded-full bg-primary", "accent-primary-foreground"],
9 danger: ["rounded-full bg-danger", "accent-danger-foreground"],
10 tonal: ["rounded-full bg-secondary", "accent-secondary-foreground"],
11} as const;
12
13export function MaterialIconButton(props: {
14 readonly accessibilityLabel: string;
15 readonly icon: AppSymbolName;
16 readonly onPress?: () => void;
17 readonly disabled?: boolean;
18 readonly selected?: boolean;
19 readonly variant?: "standard" | "primary" | "tonal" | "danger";
20 readonly tintColorClassName?: string;
21}) {
22 const variant = props.variant ?? "standard";
23 const [containerClassName, iconTintClassName] = VARIANT_CLASS_NAMES[variant];
24 return (
25 <Pressable
26 onPress={props.onPress}
27 disabled={props.disabled}
28 accessibilityLabel={props.accessibilityLabel}
29 accessibilityRole="button"
30 accessibilityState={{ disabled: Boolean(props.disabled), selected: props.selected }}
31 className={cn(
32 "size-12 items-center justify-center",
33 props.disabled && variant !== "standard"
34 ? "rounded-full bg-subtle-strong"
35 : containerClassName,
36 )}
37 >
38 <SymbolView
39 name={props.icon}
40 size={24}
41 tintColorClassName={
42 props.disabled
43 ? "accent-icon-subtle"
44 : variant === "standard"
45 ? (props.tintColorClassName ?? iconTintClassName)
46 : iconTintClassName
47 }
48 />
49 </Pressable>
50 );
51}