feat(theme): add theme toggle and fix light mode

AcutusLabs · Mar 3, 2024 · 3b99f1e · 3b99f1e
1 parent b642133
commit 3b99f1e
Show file tree

Hide file tree

Showing 10 changed files with 3,044 additions and 18,187 deletions.
diff --git a/app/(dashboard)/dashboard/layout.tsx b/app/(dashboard)/dashboard/layout.tsx
@@ -6,6 +6,7 @@ import { UserAccountNav } from "@/components/app/dashboard/user-account-nav"
 import { MainNav } from "@/components/main-nav"
 import { DashboardNav } from "@/components/nav"
 import { SiteFooter } from "@/components/site-footer"
+import { ThemeToggle } from "@/components/theme-toggle"
 
 interface DashboardLayoutProps {
   children?: React.ReactNode
@@ -25,13 +26,16 @@ export default async function DashboardLayout({
       <header className="sticky top-0 z-40 border-b bg-background">
         <div className="container flex h-16 items-center justify-between py-4">
           <MainNav items={dashboardConfig.mainNav} />
-          <UserAccountNav
-            user={{
-              name: user.name,
-              image: user.image,
-              email: user.email,
-            }}
-          />
+          <div className="flex space-x-2">
+            <ThemeToggle />
+            <UserAccountNav
+              user={{
+                name: user.name,
+                image: user.image,
+                email: user.email,
+              }}
+            />
+          </div>
         </div>
       </header>
       <div className="container grid flex-1 gap-12 md:grid-cols-[200px_1fr]">

diff --git a/app/(marketing)/layout.tsx b/app/(marketing)/layout.tsx
@@ -5,6 +5,7 @@ import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 import { MainNav } from "@/components/main-nav"
 import { SiteFooter } from "@/components/site-footer"
+import { ThemeToggle } from "@/components/theme-toggle"
 
 interface MarketingLayoutProps {
   children: React.ReactNode
@@ -18,17 +19,20 @@ export default async function MarketingLayout({
       <header className="container z-40 bg-background">
         <div className="flex h-20 items-center justify-between py-6">
           <MainNav items={marketingConfig.mainNav} />
-          <nav>
-            <Link
-              href="/login"
-              className={cn(
-                buttonVariants({ variant: "secondary", size: "sm" }),
-                "px-4"
-              )}
-            >
-              Login
-            </Link>
-          </nav>
+          <div className="flex space-x-2">
+            <ThemeToggle />
+            <nav>
+              <Link
+                href="/login"
+                className={cn(
+                  buttonVariants({ variant: "secondary", size: "sm" }),
+                  "px-4"
+                )}
+              >
+                Login
+              </Link>
+            </nav>
+          </div>
         </div>
       </header>
       <main className="flex-1">{children}</main>

diff --git a/app/client-providers.tsx b/app/client-providers.tsx
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -10,8 +10,6 @@ import { Analytics } from "@/components/analytics"
 import { TailwindIndicator } from "@/components/tailwind-indicator"
 import { ThemeProvider } from "@/components/theme-provider"
 
-import ClientProviders from "./client-providers"
-
 const fontSans = FontSans({
   subsets: ["latin"],
   variable: "--font-sans",
@@ -86,7 +84,7 @@ export default function RootLayout({ children }: RootLayoutProps) {
         )}
       >
         <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
-          <ClientProviders>{children}</ClientProviders>
+          {children}
           <Analytics />
           <Toaster />
           <TailwindIndicator />

diff --git a/components/app/translation/table/row.tsx b/components/app/translation/table/row.tsx
@@ -1,4 +1,9 @@
-import { Menu, MenuButton, MenuItem, MenuList } from "@chakra-ui/react"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
 
 import { Keyword } from "../useTranslation"
 
@@ -13,23 +18,23 @@ const Row = (props: Props) => {
 
   return (
     <tr
-      className="border-b dark:border-gray-700 cursor-pointer"
+      className="cursor-pointer border-b dark:border-gray-700"
       onClick={openDetail}
     >
       <th
         scope="row"
-        className="align-middle whitespace-nowrap px-4 py-3 font-medium text-gray-900 dark:text-white"
+        className="whitespace-nowrap px-4 py-3 align-middle font-medium text-gray-900 dark:text-white"
       >
         {keyword.key}
       </th>
-      <td className="align-middle px-4 py-3">
-        <div className="flex flex-wrap gap-2 max-w-[100px]">
+      <td className="px-4 py-3 align-middle">
+        <div className="flex max-w-[100px] flex-wrap gap-2">
           {keyword.languagesAvailable.map((language) => {
             if (language.available) {
               return (
                 <span
                   key={language.language}
-                  className="text-green-600 dark:text-green-500 font-medium"
+                  className="font-medium text-green-600 dark:text-green-500"
                 >
                   {language.short.toUpperCase()}
                 </span>
@@ -39,15 +44,15 @@ const Row = (props: Props) => {
             return (
               <span
                 key={language.language}
-                className="text-red-600 dark:text-red-500 font-medium"
+                className="font-medium text-red-600 dark:text-red-500"
               >
                 {language.short.toUpperCase()}
               </span>
             )
           })}
         </div>
       </td>
-      <td className="align-middle px-4 py-3">{keyword.info?.context}</td>
+      <td className="px-4 py-3 align-middle">{keyword.info?.context}</td>
       {/* <td className="align-middle">
         <Image
           className="rounded-lg m-0"
@@ -58,12 +63,12 @@ const Row = (props: Props) => {
         />
       </td> */}
       <td
-        className="align-middle px-4 py-3"
+        className="px-4 py-3 align-middle"
         onClick={(e) => e.stopPropagation()}
       >
         <div className="flex justify-end">
-          <Menu>
-            <MenuButton>
+          <DropdownMenu>
+            <DropdownMenuTrigger>
               <svg
                 className="h-5 w-5"
                 aria-hidden="true"
@@ -73,12 +78,14 @@ const Row = (props: Props) => {
               >
                 <path d="M6 10a2 2 0 11-4 0 2 2 0 014 0zM12 10a2 2 0 11-4 0 2 2 0 014 0zM16 12a2 2 0 100-4 2 2 0 000 4z" />
               </svg>
-            </MenuButton>
-            <MenuList>
-              <MenuItem onClick={openDetail}>Edit</MenuItem>
-              <MenuItem onClick={deleteKeyword}>Delete</MenuItem>
-            </MenuList>
-          </Menu>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              <DropdownMenuItem onClick={openDetail}>Edit</DropdownMenuItem>
+              <DropdownMenuItem onClick={deleteKeyword}>
+                Delete
+              </DropdownMenuItem>
+            </DropdownMenuContent>
+          </DropdownMenu>
         </div>
       </td>
     </tr>

diff --git a/components/mode-toggle.tsx b/components/mode-toggle.tsx
diff --git a/components/theme-toggle.tsx b/components/theme-toggle.tsx
@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import { useTheme } from "next-themes"
+
+import { Button } from "@/components/ui/button"
+import { Icons } from "@/components/icons"
+
+export function ThemeToggle() {
+  const { theme } = useTheme()
+  const { setTheme } = useTheme()
+
+  const handleToggle = React.useCallback(() => {
+    setTheme(theme === "light" ? "dark" : "light")
+  }, [setTheme, theme])
+
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      className="h-8 w-8 px-0"
+      onClick={handleToggle}
+    >
+      <Icons.sun className="rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+      <Icons.moon className="absolute rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  )
+}
diff --git a/package.json b/package.json
@@ -24,7 +24,6 @@
     "stripe:webhook": "stripe listen --forward-to localhost:3000/api/webhooks/stripe"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.8.2",
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
     "@hookform/resolvers": "^3.1.0",
@@ -88,7 +87,6 @@
     "react-editor-js": "^2.1.0",
     "react-hook-form": "^7.43.9",
     "react-icons": "^5.0.1",
-    "react-query": "^3.39.3",
     "react-textarea-autosize": "^8.4.1",
     "sharp": "^0.31.3",
     "shiki": "^0.11.1",
@@ -144,4 +142,4 @@
       "config": "commitizen.config.js"
     }
   }
-}
+}