Initial Commit

components/ui/Button.tsx

@@ -0,0 +1,54 @@
+// components/ui/Button.tsx
+import React from "react";
+import Link from "next/link";
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  href?: string;
+  variant?: "primary" | "secondary" | "outline";
+  size?: "sm" | "md" | "lg";
+  children: React.ReactNode;
+  className?: string;
+}
+
+const Button: React.FC<ButtonProps> = ({
+  href,
+  variant = "primary",
+  size = "md",
+  children,
+  className = "",
+  ...props
+}) => {
+  const baseStyle =
+    "inline-flex items-center justify-center rounded-md font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2";
+
+  const variantStyles = {
+    primary: "bg-primary text-dark hover:bg-primary/90 focus:ring-primary/50",
+    secondary: "bg-dark text-light hover:bg-gray-800 focus:ring-dark/50",
+    outline:
+      "border border-primary text-primary hover:bg-primary hover:text-dark focus:ring-primary/50",
+  };
+
+  const sizeStyles = {
+    sm: "px-4 py-2 text-sm",
+    md: "px-6 py-3 text-base",
+    lg: "px-8 py-4 text-lg",
+  };
+
+  const combinedClassName = `${baseStyle} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`;
+
+  if (href) {
+    return (
+      <Link href={href} className={combinedClassName}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <button className={combinedClassName} {...props}>
+      {children}
+    </button>
+  );
+};
+
+export default Button;