Преглед на файлове

add dark theme provider

Milo Schwartz преди 8 месеца
родител
ревизия
bd4b714ab8
променени са 5 файла, в които са добавени 33 реда и са изтрити 7 реда
  1. 1 0
      package.json
  2. 5 1
      src/app/[orgId]/components/TopbarNav.tsx
  3. 5 2
      src/app/[orgId]/layout.tsx
  4. 13 4
      src/app/layout.tsx
  5. 9 0
      src/providers/ThemeProvider.tsx

+ 1 - 0
package.json

@@ -54,6 +54,7 @@
         "lucide-react": "0.447.0",
         "moment": "2.30.1",
         "next": "14.2.13",
+        "next-themes": "0.3.0",
         "node-fetch": "3.3.2",
         "nodemailer": "6.9.15",
         "oslo": "1.2.1",

+ 5 - 1
src/app/[orgId]/components/TopbarNav.tsx

@@ -50,7 +50,11 @@ export function TopbarNav({
                     aria-disabled={disabled}
                 >
                     <div className="flex items-center gap-2">
-                        {item.icon}
+                        {item.icon && (
+                            <div className="hidden md:block">
+                                {item.icon}
+                            </div>
+                        )}
                         {item.title}
                     </div>
                 </Link>

+ 5 - 2
src/app/[orgId]/layout.tsx

@@ -4,6 +4,7 @@ import { Cog, Combine, LayoutGrid, Tent, Users, Waypoints } from "lucide-react";
 import Header from "./components/Header";
 import { verifySession } from "@app/lib/auth/verifySession";
 import { redirect } from "next/navigation";
+import { cache } from "react";
 
 export const metadata: Metadata = {
     title: "Configuration",
@@ -42,7 +43,9 @@ export default async function ConfigurationLaytout({
     children,
     params,
 }: ConfigurationLaytoutProps) {
-    const user = await verifySession();
+    const loadUser = cache(async () => await verifySession());
+
+    const user = await loadUser();
 
     if (!user) {
         redirect("/auth/login");
@@ -50,7 +53,7 @@ export default async function ConfigurationLaytout({
 
     return (
         <>
-            <div className="w-full bg-neutral-100 border-b border-neutral-200 mb-6 select-none sm:px-0 px-3 pt-3">
+            <div className="w-full bg-neutral-100 dark:bg-neutral-800 border-b border-neutral-200 dark:border-neutral-900 mb-6 select-none sm:px-0 px-3 pt-3">
                 <div className="container mx-auto flex flex-col content-between gap-4">
                     <Header email={user.email} orgName={params.orgId} />
                     <TopbarNav items={topNavItems} orgId={params.orgId} />

+ 13 - 4
src/app/layout.tsx

@@ -1,7 +1,8 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { Inter, Roboto } from "next/font/google";
+import { Inter, Open_Sans, Roboto } from "next/font/google";
 import { Toaster } from "@/components/ui/toaster";
+import { ThemeProvider } from "@app/providers/ThemeProvider";
 
 export const metadata: Metadata = {
     title: process.env.NEXT_PUBLIC_APP_NAME,
@@ -9,6 +10,7 @@ export const metadata: Metadata = {
 };
 
 const font = Inter({ subsets: ["latin"] });
+// const font = Open_Sans({ subsets: ["latin"] });
 
 export default async function RootLayout({
     children,
@@ -16,10 +18,17 @@ export default async function RootLayout({
     children: React.ReactNode;
 }>) {
     return (
-        <html>
+        <html suppressHydrationWarning>
             <body className={`${font.className} pb-3`}>
-                <main>{children}</main>
-                <Toaster />
+                <ThemeProvider
+                    attribute="class"
+                    defaultTheme="system"
+                    enableSystem
+                    disableTransitionOnChange
+                >
+                    {children}
+                    <Toaster />
+                </ThemeProvider>
             </body>
         </html>
     );

+ 9 - 0
src/providers/ThemeProvider.tsx

@@ -0,0 +1,9 @@
+"use client";
+
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+    return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}