Theme switcher and minor fixes

Author: DylanBPY

app/home/page.tsx

@@ -5,7 +5,7 @@ import { Button } from "@/components/ui/button";
 export default function Home({ setCurrentTab }: { setCurrentTab?: (tab: string) => void }) {
     return (
         <div className="relative flex flex-col w-full items-center">
-            <div className="absolute top-0 left-0 right-0 h-[30vh] bg-linear-to-b from-primary/4 to-transparent pointer-events-none" />
+            <div className="absolute top-0 left-0 right-0 h-[40vh] bg-linear-to-b from-primary/8 dark:from-primary/4 to-transparent pointer-events-none" />
 
             {/* <img className="rounded-md mt-10 mb-6" width={570} height={240} src="/banner.png" alt="JavaBee Logo" /> */}
             <div className="rounded-md mb-6 mt-10 bg-black w-142.5 h-60 flex items-center justify-center">
@@ -21,7 +21,7 @@ export default function Home({ setCurrentTab }: { setCurrentTab?: (tab: string)
                 </p>
             </div>
 
-            <div className="flex items-center gap-4 mt-8">
+            <div className="flex items-center gap-4 mt-6">
                 <Button size="lg" onClick={() => setCurrentTab?.('docs')}>Get Started with JavaBee</Button>
                 <Button variant="outline" size="lg" onClick={() => setCurrentTab?.('ftc-utils')}>General FTC Utilities</Button>
             </div>

components/menu-bar.tsx

@@ -2,37 +2,41 @@
 
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"
 import { Discord, Github } from "@/components/media-buttons";
+import ThemeSwitch from "@/components/theme-switch";
+import { Separator } from "@/components/ui/separator";
 
 interface MenuBarProps {
   currentTab: string;
   onTabChange: (tab: string) => void;
 }
 
 export function MenuBar({ currentTab, onTabChange }: MenuBarProps) {
-
   return (
     <div className="w-full h-16 border-b flex items-center justify-between px-6 bg-background shrink-0">
-        {/* Logo and Title */}
-        <div className="flex flex-1 items-center gap-3 font-bold text-lg">
-            {/* <img src="/logo.png" alt="JavaBee Logo" width={40} height={40} className="rounded-md" /> */}
-            <div className="rounded-md bg-black w-10 h-10 flex items-center justify-center">
-                <p className="text-xs">Logo</p>
-            </div>
-
-            <span className="text-primary">JavaBee Utilities</span>
+      <div className="flex flex-1 items-center gap-3 font-bold text-lg">
+        {/* <img src="/logo.png" alt="JavaBee Logo" width={40} height={40} className="rounded-md" /> */}
+        <div className="rounded-md bg-black w-10 h-10 flex items-center justify-center">
+          <p className="text-xs">Logo</p>
         </div>
 
+        <span className="text-primary">JavaBee Utilities</span>
+      </div>
+
       <Tabs value={currentTab} onValueChange={onTabChange}>
         <TabsList variant="line">
-            <TabsTrigger value="home">Home</TabsTrigger>
-            <TabsTrigger value="ftc-utils">General FTC Utilities</TabsTrigger>
-            <TabsTrigger value="docs">Docs</TabsTrigger>
+          <TabsTrigger value="home">Home</TabsTrigger>
+          <TabsTrigger value="ftc-utils">General FTC Utilities</TabsTrigger>
+          <TabsTrigger value="docs">Docs</TabsTrigger>
         </TabsList>
-        </Tabs>
+      </Tabs>
 
-      <div className="flex flex-1 items-center justify-end space-x-4">
-        <Discord />
-        <Github />
+      <div className="flex flex-1 items-center justify-end">
+        <ThemeSwitch />
+        <Separator orientation="vertical" className="h-8" />
+        <div className="flex ml-4 gap-4">
+          <Discord />
+          <Github />
+        </div>
       </div>
     </div>
   );

components/theme-switch.tsx

@@ -0,0 +1,29 @@
+'use client'
+
+import { Sun, Moon } from 'lucide-react'
+import { Switch } from '@/components/ui/switch'
+import { useTheme } from 'next-themes';
+
+// Derived from: https://shadcnstudio.com/docs/components/switch 12
+export default function ThemeSwitch() {
+  const { theme, setTheme } = useTheme();
+
+  return (
+    <div>
+      <div className='relative inline-grid h-7 grid-cols-[1fr_1fr] items-center text-sm font-medium'>
+        <Switch
+          checked={theme === 'light'}
+          onCheckedChange={(checked) => setTheme(checked ? 'light' : 'dark')}
+          className='peer data-[state=checked]:bg-input/50 data-[state=unchecked]:bg-input/50 [&_span]:bg-background! absolute inset-0 data-[size=default]:h-[inherit] data-[size=default]:w-14 [&_span]:transition-transform [&_span]:duration-300 [&_span]:ease-[cubic-bezier(0.16,1,0.3,1)] [&_span]:group-data-[size=default]/switch:size-6.5 [&_span]:data-[state=checked]:translate-x-7 [&_span]:data-[state=checked]:rtl:-translate-x-7'
+          aria-label='Switch with icon indicators'
+        />
+        <span className='peer-data-[state=checked]:text-muted-foreground/70 pointer-events-none relative ml-1.75 flex min-w-7 items-center text-center'>
+          <Moon className='size-4' aria-hidden='true' />
+        </span>
+        <span className='peer-data-[state=unchecked]:text-muted-foreground/70 pointer-events-none relative -ms-px flex min-w-7 items-center text-center'>
+          <Sun className='size-4' aria-hidden='true' />
+        </span>
+      </div>
+    </div>
+  )
+}