feat(repo:app): add darkmode

drondiodev · Sep 30, 2024 · f5f8995 · f5f8995
1 parent 9720ed8
commit f5f8995
Show file tree

Hide file tree

Showing 9 changed files with 150 additions and 52 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -3,8 +3,11 @@ import localFont from 'next/font/local';
 import React from 'react';
 
 import GoogleAnalytics from '@/components/GoogleAnalytics';
+import Footer from '@/components/footer';
+import Header from '@/components/header';
 
 import './globals.css';
+import Providers from './providers';
 import siteConfig from '@/config/site';
 
 const geistSans = localFont({
@@ -24,7 +27,14 @@ export const metadata: Metadata = {
     template: `%s | ${siteConfig.name}`,
   },
   description: siteConfig.description,
-  keywords: ['Next.js', 'Tailwind CSS', 'Husky', 'Lint-Staged', 'Docker'],
+  keywords: [
+    'Next.js',
+    'Tailwind CSS',
+    'Husky',
+    'Lint-Staged',
+    'Docker',
+    'Google Analytics',
+  ],
   authors: [
     {
       name: siteConfig.author,
@@ -61,7 +71,7 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="fr">
+    <html lang="fr" className="scroll-smooth" suppressHydrationWarning>
       <head>
         {/* <link rel="icon" href="/favicon.ico" /> */}
         <link
@@ -70,9 +80,13 @@ export default function RootLayout({
         ></link>
       </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`flex min-h-screen flex-col ${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <Providers>
+          <Header />
+          <main className="grow">{children}</main>
+          <Footer />
+        </Providers>
       </body>
       <GoogleAnalytics />
     </html>

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,44 +1,14 @@
 export default function Home() {
   return (
     <>
-      <div className="bg-white">
-        <div className="mx-auto max-w-7xl py-24 sm:px-6 sm:py-32 lg:px-8">
-          <div className="isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl sm:rounded-3xl sm:px-16 md:pt-24">
-            <svg
-              viewBox="0 0 1024 1024"
-              aria-hidden="true"
-              className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-y-1/2 [mask-image:radial-gradient(closest-side,white,transparent)] sm:left-full sm:-ml-80 lg:left-1/2 lg:ml-0 lg:-translate-x-1/2 lg:translate-y-0"
-            >
-              <circle
-                r={512}
-                cx={512}
-                cy={512}
-                fill="url(#759c1415-0410-454c-8f7c-9a820de03641)"
-                fillOpacity="0.7"
-              />
-              <defs>
-                <radialGradient id="759c1415-0410-454c-8f7c-9a820de03641">
-                  <stop stopColor="#7775D6" />
-                  <stop offset={1} stopColor="#E935C1" />
-                </radialGradient>
-              </defs>
-            </svg>
-            <div className="mx-auto text-center">
-              <h2 className="text-2xl font-bold text-white sm:text-3xl">
-                TEAM DEVELOPMENT STARTER KIT
-                <br />
-                Boost your productivity !
-              </h2>
-
-              <div className="my-10 flex items-center justify-center gap-x-6">
-                <p className="rounded-md bg-white px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white">
-                  Welcome
-                </p>
-              </div>
-            </div>
-          </div>
+      <section className="py-24">
+        <div className="container">
+          <h1 className="text-3xl font-bold">TEAM DEVELOPMENT STARTER KIT</h1>
+          <p className="text-muted-foreground mt-3">
+            Boost your productivity !
+          </p>
         </div>
-      </div>
+      </section>
     </>
   );
 }
diff --git a/app/providers.tsx b/app/providers.tsx
@@ -0,0 +1,7 @@
+'use client';
+
+import { ThemeProvider } from 'next-themes';
+
+export default function Providers({ children }: { children: React.ReactNode }) {
+  return <ThemeProvider attribute="class">{children}</ThemeProvider>;
+}
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -0,0 +1,24 @@
+import Link from 'next/link';
+
+export default function Footer() {
+  return (
+    <footer className="py-4">
+      <div className="text-muted-foreground container flex flex-col items-center justify-between gap-x-3 gap-y-1 text-center text-sm sm:flex-row">
+        <p>
+          Starter Kit &copy;{new Date().getFullYear()}. All rights reserved.
+        </p>
+        <p className="text-xs">
+          Developed by{' '}
+          <Link
+            target="_blank"
+            rel="noopener noreferrer"
+            className="text-primary hover:text-accent-foreground transition-colors"
+            href="/"
+          >
+            Compagny Name
+          </Link>
+        </p>
+      </div>
+    </footer>
+  );
+}
diff --git a/components/header.tsx b/components/header.tsx
@@ -0,0 +1,15 @@
+import Link from 'next/link';
+
+import ThemeButton from './theme-button';
+
+export default function Header() {
+  return (
+    <header className="py-6">
+      <nav className="container flex items-center justify-between">
+        <Link href="/">Accueil</Link>
+
+        <ThemeButton />
+      </nav>
+    </header>
+  );
+}
diff --git a/components/theme-button.tsx b/components/theme-button.tsx
@@ -0,0 +1,34 @@
+'use client';
+
+import { Moon, Sun } from 'lucide-react';
+import { useTheme } from 'next-themes';
+import { useEffect, useState } from 'react';
+
+const ThemeButton = () => {
+  const { resolvedTheme, setTheme } = useTheme();
+
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => setMounted(true), []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <button
+      aria-label="Toggle Dark Mode"
+      type="button"
+      className="flex items-center justify-center rounded-lg p-2 transition-colors hover:bg-zinc-100 dark:hover:bg-zinc-700"
+      onClick={() => setTheme(resolvedTheme === 'dark' ? 'light' : 'dark')}
+    >
+      {resolvedTheme === 'dark' ? (
+        <Sun className="h-5 w-5 text-white transition-all" />
+      ) : (
+        <Moon className="h-5 w-5 text-slate-800" />
+      )}
+      <span className="sr-only">Toggle theme</span>
+    </button>
+  );
+};
+
+export default ThemeButton;
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@t3-oss/env-nextjs": "^0.11.1",
     "jiti": "^1.21.6",
     "next": "14.2.11",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "zod": "^3.23.8"
@@ -36,6 +37,7 @@
     "eslint-plugin-prettier": "^5.2.1",
     "husky": "^9.1.6",
     "lint-staged": "^15.2.10",
+    "lucide-react": "^0.446.0",
     "postcss": "^8",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.6",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -6,9 +6,15 @@ const config: Config = {
     './components/**/*.{js,ts,jsx,tsx,mdx}',
     './app/**/*.{js,ts,jsx,tsx,mdx}',
   ],
+  darkMode: 'class',
   theme: {
-    extend: {
-      colors: {},
+    container: {
+      center: true,
+      padding: {
+        DEFAULT: '1rem',
+        md: '1.5rem',
+        lg: '2rem',
+      },
     },
   },
   plugins: [],