Merge pull request #22 from kcmikee/main

Create Button with Functionality component
ZencypherSolutions · Dec 21, 2024 · 526d6c1 · 526d6c1
2 parents 2f3dbbe + 4d2e2c4
commit 526d6c1
Show file tree

Hide file tree

Showing 2 changed files with 118 additions and 62 deletions.
diff --git a/src/components/button.tsx b/src/components/button.tsx
@@ -0,0 +1,53 @@
+"use client";
+import React, { forwardRef, ButtonHTMLAttributes } from "react";
+
+const buttonVariants = {
+  variant: {
+    default: "bg-text-dark text-white hover:opacity-70",
+    destructive: "bg-red-500 text-white hover:bg-red-500/90",
+    outline:
+      "border border-blue-500 bg-white hover:bg-gray-100 hover:text-blue-800",
+    secondary:
+      "bg-transparent text-gray-900 font-medium border border-blue-500 hover:bg-gray-100/80",
+    tertiary:
+      "bg-gradient-to-r from-blue-100 to-blue-100 text-black font-medium border border-blue-500 hover:opacity-90",
+    ghost: "hover:bg-gray-100 hover:text-gray-900",
+    link: "text-gray-900 underline-offset-4 hover:underline",
+  },
+  size: {
+    default: "h-12 px-4 py-2 rounded-lg",
+    md: "h-11 px-4 py-2",
+    sm: "h-9 rounded-md px-3",
+    lg: "h-14 rounded-xl px-8",
+    icon: "h-10 w-10",
+  },
+};
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: keyof typeof buttonVariants.variant;
+  size?: keyof typeof buttonVariants.size;
+  className?: string;
+}
+
+const cn = (...classes: (string | undefined)[]) => {
+  return classes.filter(Boolean).join(" ");
+};
+
+const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className = "", variant = "default", size = "sm", ...props }, ref) => {
+    const combinedClassName = cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md text-base font-medium",
+      "ring-offset-white transition-colors focus-visible:outline-none focus-visible:ring-2",
+      "focus-visible:ring-blue-500 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+      buttonVariants.variant[variant],
+      buttonVariants.size[size],
+      className
+    );
+
+    return <button ref={ref} className={combinedClassName} {...props} />;
+  }
+);
+
+Button.displayName = "Button";
+
+export default Button;
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,72 +1,75 @@
 import type { Config } from "tailwindcss";
 
 export default {
-    darkMode: ["class"],
-    content: [
+  darkMode: ["class"],
+  content: [
     "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
     "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
-  	extend: {
-  		colors: {
-  			background: 'hsl(var(--background))',
-  			foreground: 'hsl(var(--foreground))',
-  			card: {
-  				DEFAULT: 'hsl(var(--card))',
-  				foreground: 'hsl(var(--card-foreground))'
-  			},
-  			popover: {
-  				DEFAULT: 'hsl(var(--popover))',
-  				foreground: 'hsl(var(--popover-foreground))'
-  			},
-  			primary: {
-  				DEFAULT: 'hsl(var(--primary))',
-  				foreground: 'hsl(var(--primary-foreground))'
-  			},
-  			secondary: {
-  				DEFAULT: 'hsl(var(--secondary))',
-  				foreground: 'hsl(var(--secondary-foreground))'
-  			},
-  			muted: {
-  				DEFAULT: 'hsl(var(--muted))',
-  				foreground: 'hsl(var(--muted-foreground))'
-  			},
-  			accent: {
-  				DEFAULT: 'hsl(var(--accent))',
-  				foreground: 'hsl(var(--accent-foreground))'
-  			},
-  			destructive: {
-  				DEFAULT: 'hsl(var(--destructive))',
-  				foreground: 'hsl(var(--destructive-foreground))'
-  			},
-  			border: 'hsl(var(--border))',
-  			input: 'hsl(var(--input))',
-  			ring: 'hsl(var(--ring))',
-  			chart: {
-  				'1': 'hsl(var(--chart-1))',
-  				'2': 'hsl(var(--chart-2))',
-  				'3': 'hsl(var(--chart-3))',
-  				'4': 'hsl(var(--chart-4))',
-  				'5': 'hsl(var(--chart-5))'
-  			},
-  			sidebar: {
-  				DEFAULT: 'hsl(var(--sidebar-background))',
-  				foreground: 'hsl(var(--sidebar-foreground))',
-  				primary: 'hsl(var(--sidebar-primary))',
-  				'primary-foreground': 'hsl(var(--sidebar-primary-foreground))',
-  				accent: 'hsl(var(--sidebar-accent))',
-  				'accent-foreground': 'hsl(var(--sidebar-accent-foreground))',
-  				border: 'hsl(var(--sidebar-border))',
-  				ring: 'hsl(var(--sidebar-ring))'
-  			}
-  		},
-  		borderRadius: {
-  			lg: 'var(--radius)',
-  			md: 'calc(var(--radius) - 2px)',
-  			sm: 'calc(var(--radius) - 4px)'
-  		}
-  	}
+    extend: {
+      colors: {
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        "text-dark": "#232931",
+        "text-medium": "#393E46",
+        "text-light": "#E36C59",
+        hover: "#2C5154",
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))",
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))",
+        },
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))",
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))",
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))",
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))",
+        },
+        border: "hsl(var(--border))",
+        input: "hsl(var(--input))",
+        ring: "hsl(var(--ring))",
+        chart: {
+          "1": "hsl(var(--chart-1))",
+          "2": "hsl(var(--chart-2))",
+          "3": "hsl(var(--chart-3))",
+          "4": "hsl(var(--chart-4))",
+          "5": "hsl(var(--chart-5))",
+        },
+        sidebar: {
+          DEFAULT: "hsl(var(--sidebar-background))",
+          foreground: "hsl(var(--sidebar-foreground))",
+          primary: "hsl(var(--sidebar-primary))",
+          "primary-foreground": "hsl(var(--sidebar-primary-foreground))",
+          accent: "hsl(var(--sidebar-accent))",
+          "accent-foreground": "hsl(var(--sidebar-accent-foreground))",
+          border: "hsl(var(--sidebar-border))",
+          ring: "hsl(var(--sidebar-ring))",
+        },
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)",
+      },
+    },
   },
-  plugins: [require("tailwindcss-animate")],
 } satisfies Config;