// @/components/common/Button.tsx
import React from 'react';
import { Pressable, Text, View } from 'react-native';
import clsx from 'clsx';
type ColorVariant =
| 'red'
| 'orange'
| 'amber'
| 'yellow'
| 'lime'
| 'green'
| 'emerald'
| 'teal'
| 'cyan'
| 'sky'
| 'blue'
| 'indigo'
| 'violet'
| 'purple'
| 'fuchsia'
| 'pink'
| 'rose'
| 'slate'
| 'gray'
| 'zinc'
| 'neutral'
| 'stone';
const variantStyles: Record<ColorVariant, { bg: string; text: string; border: string }> = {
red: { bg: 'bg-red-500 dark:bg-red-500', text: 'text-red-500', border: 'border-red-500' },
orange: { bg: 'bg-orange-500 dark:bg-orange-500', text: 'text-orange-500', border: 'border-orange-500' },
amber: { bg: 'bg-amber-500 dark:bg-amber-500', text: 'text-amber-500', border: 'border-amber-500' },
yellow: { bg: 'bg-yellow-500 dark:bg-yellow-500', text: 'text-yellow-500', border: 'border-yellow-500' },
lime: { bg: 'bg-lime-500 dark:bg-lime-500', text: 'text-lime-500', border: 'border-lime-500' },
green: { bg: 'bg-green-500 dark:bg-green-500', text: 'text-green-500', border: 'border-green-500' },
emerald: { bg: 'bg-emerald-500 dark:bg-emerald-500', text: 'text-emerald-500', border: 'border-emerald-500' },
teal: { bg: 'bg-teal-500 dark:bg-teal-500', text: 'text-teal-500', border: 'border-teal-500' },
cyan: { bg: 'bg-cyan-500 dark:bg-cyan-500', text: 'text-cyan-500', border: 'border-cyan-500' },
sky: { bg: 'bg-sky-500 dark:bg-sky-500', text: 'text-sky-500', border: 'border-sky-500' },
blue: { bg: 'bg-blue-500 dark:bg-blue-500', text: 'text-blue-500', border: 'border-blue-500' },
indigo: { bg: 'bg-indigo-500 dark:bg-indigo-500', text: 'text-indigo-500', border: 'border-indigo-500' },
violet: { bg: 'bg-violet-500 dark:bg-violet-500', text: 'text-violet-500', border: 'border-violet-500' },
purple: { bg: 'bg-purple-500 dark:bg-purple-500', text: 'text-purple-500', border: 'border-purple-500' },
fuchsia: { bg: 'bg-fuchsia-500 dark:bg-fuchsia-500', text: 'text-fuchsia-500', border: 'border-fuchsia-500' },
pink: { bg: 'bg-pink-500 dark:bg-pink-500', text: 'text-pink-500', border: 'border-pink-500' },
rose: { bg: 'bg-rose-500 dark:bg-rose-500', text: 'text-rose-500', border: 'border-rose-500' },
slate: { bg: 'bg-slate-500 dark:bg-slate-500', text: 'text-slate-500', border: 'border-slate-500' },
gray: { bg: 'bg-gray-500 dark:bg-gray-500', text: 'text-gray-500', border: 'border-gray-500' },
zinc: { bg: 'bg-zinc-500 dark:bg-zinc-500', text: 'text-zinc-500', border: 'border-zinc-500' },
neutral: { bg: 'bg-neutral-500 dark:bg-neutral-500', text: 'text-neutral-500', border: 'border-neutral-500' },
stone: { bg: 'bg-stone-500 dark:bg-stone-500', text: 'text-stone-500', border: 'border-stone-500' },
};
export type ButtonProps = {
children: React.ReactNode;
onPress?: () => void;
variant?: ColorVariant;
outline?: boolean;
beforeIcon?: React.ReactNode;
afterIcon?: React.ReactNode;
};
const Button = ({
children,
onPress,
variant = 'sky',
outline = false,
beforeIcon,
afterIcon,
}: ButtonProps): React.JSX.Element => (
<Pressable onPress={onPress}>
{({ pressed }: { pressed: boolean }) => (
<View
className={clsx(
'items-center justify-center flex-row gap-x-4 p-4 rounded-xl',
outline
? `border-2 ${variantStyles[variant].border} bg-white dark:bg-slate-800`
: variantStyles[variant].bg
)}
style={{ opacity: pressed ? 0.5 : 1 }}
>
{beforeIcon}
<Text
className={clsx(
'text-base font-medium uppercase',
outline ? variantStyles[variant].text : 'text-white'
)}
>
{children}
</Text>
{afterIcon}
</View>
)}
</Pressable>
);
export default Button;