From c912b8dfb10399072aa99361576ccd476c4c472a Mon Sep 17 00:00:00 2001
From: Malik Piara <malik@hey.com>
Date: Mon, 6 May 2024 11:06:57 +0200
Subject: [PATCH] Moved start quiz button to startQuiz window to improve
 usability.

---
 components/quiz/startScreen.tsx | 11 +++++--
 components/ui/button.tsx        | 56 +++++++++++++++++++++++++++++++++
 package.json                    |  1 +
 pnpm-lock.yaml                  |  3 ++
 4 files changed, 69 insertions(+), 2 deletions(-)
 create mode 100644 components/ui/button.tsx

diff --git a/components/quiz/startScreen.tsx b/components/quiz/startScreen.tsx
index e7fd0db..4c40587 100644
--- a/components/quiz/startScreen.tsx
+++ b/components/quiz/startScreen.tsx
@@ -1,4 +1,4 @@
-import Button from '../button';
+import { Button } from '../ui/button';
 
 interface StartScreenProps {
   onStartQuiz: () => void;
@@ -15,7 +15,14 @@ export function StartScreen({ onStartQuiz }: StartScreenProps) {
           Test your knowledge on this chapter and see how much you already know!
         </p>
         <div className='font-semibold text-orange-300'>10 questions</div>
-        <Button label='Start Quiz' onClick={onStartQuiz} />
+        <Button
+          size={'lg'}
+          className='w-fit transition-all self-center mt-5 font-stretch'
+          onClick={onStartQuiz}
+        >
+          Start Quiz
+        </Button>
+
         {
           // Temporary filler to make the text content be displayed a couple of pixels above.
           <div className='h-40' />
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
new file mode 100644
index 0000000..21ca4f9
--- /dev/null
+++ b/components/ui/button.tsx
@@ -0,0 +1,56 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '@/lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-white text-black hover:bg-white/90',
+        destructive:
+          'bg-destructive text-destructive-foreground hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          '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',
+      },
+      size: {
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/package.json b/package.json
index f1cd48a..dd37295 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   },
   "dependencies": {
     "@radix-ui/react-accordion": "^1.1.2",
+    "@radix-ui/react-slot": "^1.0.2",
     "@supabase/ssr": "^0.3.0",
     "@supabase/supabase-js": "^2.43.1",
     "class-variance-authority": "^0.7.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 7045974..e7a9cb2 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -8,6 +8,9 @@ dependencies:
   '@radix-ui/react-accordion':
     specifier: ^1.1.2
     version: 1.1.2(@types/react-dom@18.2.25)(@types/react@18.3.1)(react-dom@18.2.0)(react@18.3.1)
+  '@radix-ui/react-slot':
+    specifier: ^1.0.2
+    version: 1.0.2(@types/react@18.3.1)(react@18.3.1)
   '@supabase/ssr':
     specifier: ^0.3.0
     version: 0.3.0(@supabase/supabase-js@2.43.1)