0ct0pu5/pangolin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add dark theme provider

Browse source
This commit is contained in:
Milo Schwartz 2024-10-14 18:26:07 -04:00
parent 23b98960cc
commit bd4b714ab8
No known key found for this signature in database
5 changed files with 33 additions and 7 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
package.json
View file

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

6
src/app/[orgId]/components/TopbarNav.tsx
View file

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

7
src/app/[orgId]/layout.tsx
View file

@ -4,6 +4,7 @@ import { Cog, Combine, LayoutGrid, Tent, Users, Waypoints } from "lucide-react";
import Header from "./components/Header"; import Header from "./components/Header";
import { verifySession } from "@app/lib/auth/verifySession"; import { verifySession } from "@app/lib/auth/verifySession";
import { redirect } from "next/navigation"; import { redirect } from "next/navigation";
import { cache } from "react";
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Configuration", title: "Configuration",
@ -42,7 +43,9 @@ export default async function ConfigurationLaytout({
children, children,
params, params,
}: ConfigurationLaytoutProps) { }: ConfigurationLaytoutProps) {
const user = await verifySession(); const loadUser = cache(async () => await verifySession());
const user = await loadUser();
if (!user) { if (!user) {
redirect("/auth/login"); redirect("/auth/login");
@ -50,7 +53,7 @@ export default async function ConfigurationLaytout({
return ( 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"> <div className="container mx-auto flex flex-col content-between gap-4">
<Header email={user.email} orgName={params.orgId} /> <Header email={user.email} orgName={params.orgId} />
<TopbarNav items={topNavItems} orgId={params.orgId} /> <TopbarNav items={topNavItems} orgId={params.orgId} />

17
src/app/layout.tsx
View file

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

9
src/providers/ThemeProvider.tsx Normal file
View file

@ -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>;
}