1import { Pressable } from "react-native";
2import type { FloatingActionButtonProps } from "./FloatingActionButton.types";
3import { AppText } from "./AppText";
4import { SymbolView } from "./AppSymbol";
5import { cn } from "../../lib/cn";
6
7export function FloatingActionButton(props: FloatingActionButtonProps) {
8 return (
9 <Pressable
10 accessibilityRole="button"
11 accessibilityLabel={props.label}
12 onPress={props.onPress}
13 className={cn(
14 "min-h-14 min-w-14 flex-row items-center justify-center gap-2 rounded-2xl px-4",
15 props.tone === "primary" ? "bg-primary" : "bg-secondary",
16 props.className,
17 )}
18 style={props.style}
19 >
20 <SymbolView
21 name={props.icon}
22 size={24}
23 tintColorClassName={
24 props.tone === "primary" ? "accent-primary-foreground" : "accent-secondary-foreground"
25 }
26 />
27 {props.variant === "extended" && props.expanded !== false ? (
28 <AppText
29 textRole="footnote"
30 className={cn(
31 props.tone === "primary" ? "text-primary-foreground" : "text-secondary-foreground",
32 )}
33 >
34 {props.label}
35 </AppText>
36 ) : null}
37 </Pressable>
38 );
39}