59 lines
1.4 KiB
TypeScript
59 lines
1.4 KiB
TypeScript
import type { ButtonProps } from "@/types/type";
|
|
import React from "react";
|
|
import { Text, TouchableOpacity } from "react-native";
|
|
|
|
const getBgVariantStyle = (variant: ButtonProps["bgVariant"]) => {
|
|
switch (variant) {
|
|
case "secondary":
|
|
return "bg-gray-500";
|
|
case "danger":
|
|
return "bg-rose-500";
|
|
case "success":
|
|
return "bg-emerald-500";
|
|
case "outline":
|
|
return "bg-transparent-500 border-neutral-300 border-[0.5px]";
|
|
default:
|
|
return "bg-[#0286ff]";
|
|
}
|
|
};
|
|
|
|
const getTextVariantStyle = (variant: ButtonProps["textVariant"]) => {
|
|
switch (variant) {
|
|
case "primary":
|
|
return "text-black";
|
|
case "secondary":
|
|
return "text-gray-100";
|
|
case "danger":
|
|
return "text-rose-100";
|
|
case "success":
|
|
return "text-emerald-100";
|
|
default:
|
|
return "text-white";
|
|
}
|
|
};
|
|
|
|
export const CustomButton = ({
|
|
onPress,
|
|
title,
|
|
bgVariant = "primary",
|
|
textVariant = "default",
|
|
iconLeft: IconLeft,
|
|
iconRight: IconRight,
|
|
className,
|
|
...props
|
|
}: ButtonProps) => (
|
|
<TouchableOpacity
|
|
onPress={onPress}
|
|
className={`w-full rounded-full p-3 flex flex-row justify-center items-center shadow-md shadow-neutral-400/70 ${getBgVariantStyle(bgVariant)} ${className}`}
|
|
{...props}
|
|
>
|
|
{IconLeft && <IconLeft />}
|
|
|
|
<Text className={`text-lg font-bold ${getTextVariantStyle(textVariant)}`}>
|
|
{title}
|
|
</Text>
|
|
|
|
{IconRight && <IconRight />}
|
|
</TouchableOpacity>
|
|
);
|