moved button styling to new system

Author: ariflogs

app/(sink)/demo/components/page.tsx

@@ -1,9 +1,14 @@
-import { Badge } from '@/packages/ui'
+import { Badge, Button } from '@/packages/ui'
 import React from 'react'
 
 export default function page() {
   return (
     <div className='container max-w-6xl mx-auto'>
+        <div className="space-x-4">
+          <Button>Default Button</Button>
+          <Button variant="outline">Outline Button</Button>
+          <Button variant="link">Link Button</Button>
+        </div>
         <div className="space-x-4">
           <Badge>Badge</Badge>
           <Badge variant="success">Badge</Badge>

app/demo.tsx

@@ -1,36 +1,43 @@
+import { cn } from "@/lib/utils";
+import { cva, VariantProps } from "class-variance-authority";
 import React, { ButtonHTMLAttributes } from "react";
 
-interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
-  size?: "sm" | "md" | "lg";
-  className?: string;
-  variant?: "primary" | "outline" | "link";
-}
+const buttonVariants = cva(
+  "font-head border-2 border-black shadow-md hover:shadow-xs transition-all",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary-400 text-black border-2 border-black hover:bg-primary-500",
+        outline: "bg-transparent text-black border-2 border-black",
+        link: "bg-transparent text-primary-400 hover:underline",
+      },
+      size: {
+        sm: "px-4 py-1 text-sm",
+        md: "px-6 py-2 text-base",
+        lg: "px-8 py-3 text-lg",
+      },
+    },
+    defaultVariants: {
+      size: "md",
+      variant: "default",
+    },
+  }
+);
+
+interface ButtonProps
+  extends ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {}
 
 export function Button({
   children,
   size = "md",
   className = "",
-  variant = "primary",
+  variant = "default",
   ...props
 }: ButtonProps) {
-  const sizeClasses = {
-    sm: "px-4 py-1 text-sm",
-    md: "px-6 py-2 text-base",
-    lg: "px-8 py-3 text-lg",
-  };
-
-  const variantClasses = {
-    primary:
-      "bg-primary-400 text-black border-2 border-black hover:bg-primary-500",
-    outline: "bg-transparent text-black border-2 border-black",
-    link: "bg-transparent text-primary-400 hover:underline",
-  };
-
   return (
-    <button
-      className={`font-head border-2 border-black shadow-md hover:shadow-xs transition-all ${sizeClasses[size]} ${variantClasses[variant]} ${className}`}
-      {...props}
-    >
+    <button className={cn(buttonVariants({ variant, size }), className)} {...props}>
       {children}
     </button>
   );