| 1 | import { Pressable } from "react-native"; |
| 2 | import { AppText } from "./AppText"; |
| 3 | import { cn } from "../lib/cn"; |
| 4 | |
| 5 | export interface MaterialButtonProps { |
| 6 | readonly label: string; |
| 7 | readonly onPress: () => void; |
| 8 | readonly disabled?: boolean; |
| 9 | readonly loading?: boolean; |
| 10 | readonly tone?: "primary" | "secondary" | "danger" | "text" | "contrast"; |
| 11 | readonly fullWidth?: boolean; |
| 12 | } |
| 13 | |
| 14 | const TONE_CLASS_NAMES = { |
| 15 | contrast: ["bg-foreground", "text-screen"], |
| 16 | primary: ["bg-primary", "text-primary-foreground"], |
| 17 | secondary: ["bg-secondary", "text-secondary-foreground"], |
| 18 | danger: ["bg-danger", "text-danger-foreground"], |
| 19 | text: ["bg-transparent", "text-primary-text"], |
| 20 | } as const; |
| 21 | |
| 22 | export function MaterialButton(props: MaterialButtonProps) { |
| 23 | const [containerClassName, labelClassName] = TONE_CLASS_NAMES[props.tone ?? "secondary"]; |
| 24 | const disabled = Boolean(props.disabled || props.loading); |
| 25 | return ( |
| 26 | <Pressable |
| 27 | accessibilityRole="button" |
| 28 | accessibilityState={{ disabled }} |
| 29 | disabled={disabled} |
| 30 | onPress={props.onPress} |
| 31 | className={cn( |
| 32 | "min-h-12 justify-center rounded-full px-6 active:opacity-70", |
| 33 | props.fullWidth ? "w-full" : "self-start", |
| 34 | disabled ? "bg-subtle-strong" : containerClassName, |
| 35 | )} |
| 36 | > |
| 37 | <AppText |
| 38 | className={cn( |
| 39 | "text-center font-t3-medium", |
| 40 | disabled ? "text-foreground-muted" : labelClassName, |
| 41 | )} |
| 42 | > |
| 43 | {props.label} |
| 44 | </AppText> |
| 45 | </Pressable> |
| 46 | ); |
| 47 | } |