64 lines
1.2 KiB
TypeScript
64 lines
1.2 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
import { Button, ButtonProps } from "@heroui/react";
|
||
|
|
import { tv } from "tailwind-variants";
|
||
|
|
|
||
|
|
const borderedButtonStyles = tv({
|
||
|
|
slots: {
|
||
|
|
base: "rounded-xl border border-[#E5E7EB] dark:border-gray-600 flex items-center justify-center",
|
||
|
|
button: "w-full h-full rounded-xl px-6 text-body-small font-bold border-none",
|
||
|
|
},
|
||
|
|
variants: {
|
||
|
|
size: {
|
||
|
|
md: {
|
||
|
|
base: "h-10",
|
||
|
|
},
|
||
|
|
lg: {
|
||
|
|
base: "h-11",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
fullWidth: {
|
||
|
|
true: {
|
||
|
|
base: "w-full",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
isTheme: {
|
||
|
|
true: {
|
||
|
|
button: "bg-white dark:bg-gray-800 text-text-primary dark:text-white",
|
||
|
|
},
|
||
|
|
},
|
||
|
|
},
|
||
|
|
defaultVariants: {
|
||
|
|
size: "md",
|
||
|
|
isTheme: false,
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
interface BorderedButtonProps extends ButtonProps {
|
||
|
|
size?: "md" | "lg";
|
||
|
|
fullWidth?: boolean;
|
||
|
|
isTheme?: boolean;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function BorderedButton({
|
||
|
|
size = "md",
|
||
|
|
fullWidth = false,
|
||
|
|
isTheme = false,
|
||
|
|
className,
|
||
|
|
...props
|
||
|
|
}: BorderedButtonProps) {
|
||
|
|
const { base, button } = borderedButtonStyles({ size, fullWidth, isTheme });
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className={base({ className })}>
|
||
|
|
<Button
|
||
|
|
className={button()}
|
||
|
|
{...props}
|
||
|
|
>
|
||
|
|
{props.children}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|