react-native-bootcamp_button.tsx

import type { PressableProps } from "react-native";
import { View, Text, Pressable } from "react-native";
import type { ReactNode } from "react";
import React from "react";
import clsx from 'clsx';

interface Props extends PressableProps {
  variant?: "dark" | "light" | "filled" | "outline" | "ghost";
  children: ReactNode;
}

export const Button = ({
  variant = "filled",
  ...props
}: Props) => {
 const pressableClassNames = clsx(
   "inline-flex items-center border border-transparent rounded-xl shadow-sm",
   variant === "dark" && "bg-black active:bg-neutral-700",
   variant === "light" && "bg-white active:bg-neutral-100",
   variant === "filled" && "bg-blue-500 hover:bg-blue-700 active:bg-blue-600",
   variant === "outline" && "bg-blue-100 hover:bg-blue-700 active:bg-blue-200",
   variant === "ghost" && "active:opacity-3",
 );

 const textClassNames = clsx(
   "text-base font-bold px-10 py-3",
   variant === "dark" && "text-white",
   variant === "light" && "text-black",
   variant === "filled" && "text-white",
   variant === "outline" && "text-blue-500",
 );

 return (
   <Pressable {...props} className={pressableClassNames}>
     <Text className={textClassNames}>{children}</Text>
   </View>
 );
};