QR config drawer implemented

BrainStation-23 · Dec 9, 2024 · a01f20b · a01f20b
1 parent 37752c2
commit a01f20b
Show file tree

Hide file tree

Showing 8 changed files with 258 additions and 77 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,7 +29,8 @@
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "tailwind-merge": "^2.5.5",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^1.1.1"
   },
   "devDependencies": {
     "@shadcn/ui": "^0.0.4",

diff --git a/src/app/_components/HomePage.tsx b/src/app/_components/HomePage.tsx
@@ -7,11 +7,11 @@ export const HomePage = () => {
     return (
         <section className="min-h-screen bg-background">
             <div className="w-4/5 mx-auto mt-6">
-                <Tabs defaultValue="single" className="w-full">
+                {/* <Tabs defaultValue="single" className="w-full">
                     <TabsList className="grid w-full grid-cols-2 mb-8">
                         <TabsTrigger value="single" className="font-bold">Single QR Code</TabsTrigger>
                         <TabsTrigger value="bulk" className="font-bold">Bulk Creation</TabsTrigger>
-                        {/* <TabsTrigger value="style" className="font-bold">Configure QR Style</TabsTrigger> */}
+                        <TabsTrigger value="style" className="font-bold">Configure QR Style</TabsTrigger>
                     </TabsList>
                     
                     <TabsContent value="single">
@@ -26,12 +26,13 @@ export const HomePage = () => {
                         </div>
                     </TabsContent>
 
-                    {/* <TabsContent value="style">
+                   <TabsContent value="style">
                         <div className="space-y-4">
                             <QRStyle />
                         </div>
-                    </TabsContent> */}
-                </Tabs>
+                    </TabsContent>
+                </Tabs> */}
+                <SidebarWithContent />
             </div>
         </section>
     )

diff --git a/src/app/_components/Navbar.tsx b/src/app/_components/Navbar.tsx
@@ -31,16 +31,6 @@ const Navbar = () => {
             <MoonIcon className="absolute h-4 w-4 rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
             <span className="sr-only">Toggle theme</span>
           </Button>
-
-          <Button
-            variant="ghost"
-            size="icon"
-            className="h-9 w-9"
-            onClick={() => router.push('/configure')}
-          >
-            <Settings className="h-4 w-4" />
-            <span className="sr-only">Open configuration</span>
-          </Button>
         </div>
       </div>
     </div>

diff --git a/src/app/configure/FloatingConfig.tsx b/src/app/configure/FloatingConfig.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { Settings } from 'lucide-react';
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+  SheetFooter,
+  SheetClose,
+} from "@/components/ui/sheet";
+import { Button } from "@/components/ui/button";
+import QRStyle from '../_components/QR/QRStyle/QRStyle';
+
+const FloatingConfig = () => {
+  return (
+    <div className="fixed bottom-6 right-6 z-50">
+      <Sheet>
+        <SheetTrigger asChild>
+          <Button
+            size="icon"
+            className="w-12 h-12 rounded-full"
+            aria-label="Configuration"
+          >
+            <Settings className="w-6 h-6" />
+          </Button>
+        </SheetTrigger>
+        <SheetContent className='drawer-size' side="right">
+          <SheetHeader>
+            <SheetTitle>Configuration</SheetTitle>
+            <SheetDescription>
+              Adjust your application settings here.
+            </SheetDescription>
+          </SheetHeader>
+          <div className="py-6">
+            <QRStyle />
+          </div>
+          <SheetFooter>
+            <SheetClose asChild>
+              <Button variant="outline">Okay</Button>
+            </SheetClose>
+          </SheetFooter>
+        </SheetContent>
+      </Sheet>
+    </div>
+  );
+};
+
+export default FloatingConfig;
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -3,70 +3,75 @@
 @tailwind utilities;
 
 body {
-  font-family: Arial, Helvetica, sans-serif;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
 @layer base {
-  :root {
-    --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
-    --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
-    --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
-    --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --chart-1: 12 76% 61%;
-    --chart-2: 173 58% 39%;
-    --chart-3: 197 37% 24%;
-    --chart-4: 43 74% 66%;
-    --chart-5: 27 87% 67%;
-    --radius: 0.5rem;
-  }
-  .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
-    --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
-    --chart-1: 220 70% 50%;
-    --chart-2: 160 60% 45%;
-    --chart-3: 30 80% 55%;
-    --chart-4: 280 65% 60%;
-    --chart-5: 340 75% 55%;
-  }
+    :root {
+        --background: 0 0% 100%;
+        --foreground: 0 0% 3.9%;
+        --card: 0 0% 100%;
+        --card-foreground: 0 0% 3.9%;
+        --popover: 0 0% 100%;
+        --popover-foreground: 0 0% 3.9%;
+        --primary: 0 0% 9%;
+        --primary-foreground: 0 0% 98%;
+        --secondary: 0 0% 96.1%;
+        --secondary-foreground: 0 0% 9%;
+        --muted: 0 0% 96.1%;
+        --muted-foreground: 0 0% 45.1%;
+        --accent: 0 0% 96.1%;
+        --accent-foreground: 0 0% 9%;
+        --destructive: 0 84.2% 60.2%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 89.8%;
+        --input: 0 0% 89.8%;
+        --ring: 0 0% 3.9%;
+        --chart-1: 12 76% 61%;
+        --chart-2: 173 58% 39%;
+        --chart-3: 197 37% 24%;
+        --chart-4: 43 74% 66%;
+        --chart-5: 27 87% 67%;
+        --radius: 0.5rem;
+    }
+    .dark {
+        --background: 0 0% 3.9%;
+        --foreground: 0 0% 98%;
+        --card: 0 0% 3.9%;
+        --card-foreground: 0 0% 98%;
+        --popover: 0 0% 3.9%;
+        --popover-foreground: 0 0% 98%;
+        --primary: 0 0% 98%;
+        --primary-foreground: 0 0% 9%;
+        --secondary: 0 0% 14.9%;
+        --secondary-foreground: 0 0% 98%;
+        --muted: 0 0% 14.9%;
+        --muted-foreground: 0 0% 63.9%;
+        --accent: 0 0% 14.9%;
+        --accent-foreground: 0 0% 98%;
+        --destructive: 0 62.8% 30.6%;
+        --destructive-foreground: 0 0% 98%;
+        --border: 0 0% 14.9%;
+        --input: 0 0% 14.9%;
+        --ring: 0 0% 83.1%;
+        --chart-1: 220 70% 50%;
+        --chart-2: 160 60% 45%;
+        --chart-3: 30 80% 55%;
+        --chart-4: 280 65% 60%;
+        --chart-5: 340 75% 55%;
+    }
 }
 
 @layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-  }
+    * {
+        @apply border-border;
+    }
+    body {
+        @apply bg-background text-foreground;
+    }
+}
+
+.drawer-size {
+    max-width: 60% !important;
+    width: 800px !important;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -3,6 +3,7 @@ import localFont from "next/font/local";
 import "./globals.css";
 import { ThemeProvider } from "@/utils/ThemeProvider";
 import Navbar from "./_components/Navbar";
+import FloatingConfig from "./configure/FloatingConfig";
 
 
 const geistSans = localFont({
@@ -39,6 +40,7 @@ export default function RootLayout({
         >
           <Navbar/>
           {children}
+          <FloatingConfig />
         </ThemeProvider>
       </body>
     </html>