import type { ComponentProps, ReactNode } from "react";import { Pressable, View } from "react-native";import { SymbolView } from "expo-symbols";import { useThemeColor } from "../lib/useThemeColor"; import { cn } from "../lib/cn";import { AppText as Text } from "./AppText"; export function ControlPill(props: { readonly icon?: ComponentProps<typeof SymbolView>["name"]; readonly iconNode?: ReactNode; readonly label?: string; readonly onPress?: () => void; readonly variant?: "circle" | "pill" | "primary" | "danger"; readonly disabled?: boolean;}) { const variant = props.variant ?? "circle"; const iconColor = useThemeColor("--color-icon"); const iconSubtle = useThemeColor("--color-icon-subtle"); const primaryFg = useThemeColor("--color-primary-foreground"); const dangerFg = useThemeColor("--color-danger-foreground"); const iconTintColor = variant === "primary" ? props.disabled ? iconSubtle : primaryFg : variant === "danger" ? dangerFg : iconColor; const isCircle = variant === "circle" || variant === "danger" || (variant === "primary" && !props.label); const containerClassName = cn( isCircle ? "h-11 w-11 items-center justify-center rounded-full" : variant === "primary" ? "h-11 flex-row items-center justify-center gap-2 rounded-full px-5" : "h-11 flex-row items-center justify-center gap-2 rounded-full px-3.5", variant === "primary" ? props.disabled ? "bg-subtle-strong" : "bg-primary" : variant === "danger" ? "bg-danger" : "bg-subtle", ); const labelClassName = cn( "text-center text-[12px] font-t3-bold", variant === "primary" ? props.disabled ? "text-foreground-muted" : "text-primary-foreground" : "", ); return ( <Pressable onPress={props.onPress} disabled={props.disabled} className={containerClassName}> {props.iconNode ? ( <View className="h-4 w-4 items-center justify-center">{props.iconNode}</View> ) : props.icon ? ( <SymbolView name={props.icon} size={16} tintColor={iconTintColor} type="monochrome" /> ) : null} {props.label ? <Text className={labelClassName}>{props.label}</Text> : null} </Pressable> );}
import type { ComponentProps, ReactNode } from "react";
import { Pressable, View } from "react-native";
import { SymbolView } from "expo-symbols";
import { useThemeColor } from "../lib/useThemeColor";
import { cn } from "../lib/cn";
import { AppText as Text } from "./AppText";
export function ControlPill(props: {
readonly icon?: ComponentProps<typeof SymbolView>["name"];
readonly iconNode?: ReactNode;
readonly label?: string;
readonly onPress?: () => void;
readonly variant?: "circle" | "pill" | "primary" | "danger";
readonly disabled?: boolean;
}) {
const variant = props.variant ?? "circle";
const iconColor = useThemeColor("--color-icon");
const iconSubtle = useThemeColor("--color-icon-subtle");
const primaryFg = useThemeColor("--color-primary-foreground");
const dangerFg = useThemeColor("--color-danger-foreground");
const iconTintColor =
variant === "primary"
? props.disabled
? iconSubtle
: primaryFg
: variant === "danger"
? dangerFg
: iconColor;
const isCircle =
variant === "circle" || variant === "danger" || (variant === "primary" && !props.label);
const containerClassName = cn(
isCircle
? "h-11 w-11 items-center justify-center rounded-full"
: variant === "primary"
? "h-11 flex-row items-center justify-center gap-2 rounded-full px-5"
: "h-11 flex-row items-center justify-center gap-2 rounded-full px-3.5",
variant === "primary"
? props.disabled
? "bg-subtle-strong"
: "bg-primary"
: variant === "danger"
? "bg-danger"
: "bg-subtle",
);
const labelClassName = cn(
"text-center text-[12px] font-t3-bold",
variant === "primary"
? props.disabled
? "text-foreground-muted"
: "text-primary-foreground"
: "",
);
return (
<Pressable onPress={props.onPress} disabled={props.disabled} className={containerClassName}>
{props.iconNode ? (
<View className="h-4 w-4 items-center justify-center">{props.iconNode}</View>
) : props.icon ? (
<SymbolView name={props.icon} size={16} tintColor={iconTintColor} type="monochrome" />
) : null}
{props.label ? <Text className={labelClassName}>{props.label}</Text> : null}
</Pressable>
);
}