feat: reorganize files and implement ui and sidebar

components/theme-toggle.tsx

@@ -1,33 +1,31 @@
 'use client'
 
+import * as React from 'react'
 import { useTheme } from 'next-themes'
+import { Moon, Sun } from 'lucide-react'
 
 import { Button } from '@/components/ui/button'
-import { Moon, Sun } from 'lucide-react'
-import { useTransition } from 'react'
 
 export function ThemeToggle() {
   const { setTheme, theme } = useTheme()
-  const [_, startTransition] = useTransition()
+  const [_, startTransition] = React.useTransition()
+
   return (
     <Button
       variant="ghost"
-      size="sm"
-      className="p-0 leading-4 h-4 font-normal w-full"
+      size="icon"
       onClick={() => {
         startTransition(() => {
           setTheme(theme === 'light' ? 'dark' : 'light')
         })
       }}
     >
-      <span className="flex flex-row justify-between text-xs text-zinc-900 dark:text-zinc-400 w-full">
-        <span className="">Toggle theme</span>
-        {!theme ? null : theme === 'dark' ? (
-          <Moon className="h-4 transition-all" />
-        ) : (
-          <Sun className="h-4 transition-all" />
-        )}
-      </span>
+      {!theme ? null : theme === 'dark' ? (
+        <Moon className="h-4 w-4 transition-all" />
+      ) : (
+        <Sun className="h-4 w-4 transition-all" />
+      )}
+      <span className="sr-only">Toggle theme</span>
     </Button>
   )
 }