Created custom button variants

.prettierignore

@@ -1,5 +1,4 @@
 .github/
 *.config.js
 .prettierrc.js
-*.json
 *.md

app/page.tsx

@@ -1,11 +1,8 @@
-import AuthButton from '../components/AuthButton';
-
 export default function Index() {
   return (
     <div className="flex flex-col items-center justify-center flex-1 w-full">
       <nav className="flex flex-col items-center justify-center flex-1 w-full">
-        <p>Gridiron Survivor</p>
-        <AuthButton />
+        <p className='pb-4'>Gridiron Survivor</p>
       </nav>
     </div>
   );

components/AuthButton.tsx

@@ -33,3 +33,4 @@ export default function AuthButton() {
 }
 
 //  export default AuthButton;
+

components/button/Button.stories.ts

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from "@storybook/test";
+import { Button } from './Button';
+
+//👇 This default export determines where your story goes in the story list
+const meta: Meta<typeof Button> = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component: `Primary UI component for user interaction.`,
+      },
+    },
+  },
+  argTypes: {
+    size: {
+      options: ['default', 'sm', 'lg', 'icon'],
+      control: {type: 'radio'},
+      description: "How large should the button be?",
+    },
+    variant: {
+      description: 'Which type of button?'
+    },
+    label: { description: "Button text content" },
+    onClick: { description: "Click handler" },
+  },
+  args: { onClick: fn() },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    variant: 'default',
+    size: 'default',
+    label: "Click Me",
+  },
+
+};

components/button/Button.test.tsx

@@ -0,0 +1,9 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Button } from "./Button";
+
+it('should render a button with no variant defined', () => {
+  render(<Button />)
+  const defaultButton = screen.getByRole('button')
+  expect(defaultButton).toHaveClass('bg-orange-600')
+})

components/ui/button.tsx → components/button/Button.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva, type VariantProps } from "class-variance-authority";
+import { LucideProps } from "lucide-react";
 
 import { cn } from '../../lib/utils';
 
@@ -9,13 +10,13 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        destructive:
-          "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        default: "bg-orange-600 text-white hover:bg-orange-600/90",
         outline:
           "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        destructive:
+        "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         secondary:
-          "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        "bg-secondary text-secondary-foreground hover:bg-secondary/80",
         ghost: "hover:bg-accent hover:text-accent-foreground",
         link: "text-primary underline-offset-4 hover:underline",
       },
@@ -37,20 +38,24 @@ export interface ButtonProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
   asChild?: boolean;
+  label?: string;
+  icon?: React.ComponentType<LucideProps & { className?: string }>;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : "button";
+  ({ className, variant, size, asChild, label, icon, ...props }, ref) => {
     return (
-      <Comp
+      <button
         className={cn(buttonVariants({ variant, size, className }))}
         ref={ref}
         {...props}
-      />
+      >
+      <Slot />
+      {label}
+    </button>
     );
   }
 );
 Button.displayName = "Button";
 
-export { Button, buttonVariants };
+export { Button, buttonVariants };

package.json

@@ -52,12 +52,14 @@
     "@typescript-eslint/eslint-plugin": "^7.6.0",
     "@typescript-eslint/parser": "^7.6.0",
     "encoding": "^0.1.13",
+    "eslint": "^9.0.0",
     "eslint-config-next": "14.1.4",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "prettier": "3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.14",
     "storybook": "^8.0.4",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.9.2",