大改变

components/common/BorderedButton.tsx

@@ -0,0 +1,63 @@
+"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>
+  );
+}
+