From e96e679a35be168418295ae25766685d8c7f9928 Mon Sep 17 00:00:00 2001
From: Timothy Pidashev <pidashev.tim@gmail.com>
Date: Sun, 17 Mar 2024 19:01:50 -0700
Subject: [PATCH] Theme toggle

---
 src/web/.dockerignore                         | 17 +++++
 src/web/package-lock.json                     | 21 +++++-
 src/web/package.json                          | 10 ++-
 src/web/src/.gitignore                        | 36 +++++++++
 src/web/src/app/blog/keep                     |  0
 src/web/src/app/globals.css                   |  3 +
 src/web/src/app/layout.js                     | 17 +++--
 src/web/src/app/page.jsx                      |  3 +-
 src/web/src/app/projects/keep                 |  0
 src/web/src/app/resume/keep                   |  0
 src/web/src/app/shop/keep                     |  0
 src/web/src/app/theme.jsx                     | 12 +++
 src/web/src/components/footer.jsx             |  2 +-
 .../src/components/{navbar.jsx => header.jsx} |  6 +-
 src/web/src/components/theme-toggle.jsx       | 34 +++++++++
 src/web/tailwind.config.js                    | 75 +++++++++++++++++--
 16 files changed, 215 insertions(+), 21 deletions(-)
 create mode 100644 src/web/.dockerignore
 create mode 100644 src/web/src/.gitignore
 delete mode 100644 src/web/src/app/blog/keep
 create mode 100644 src/web/src/app/globals.css
 delete mode 100644 src/web/src/app/projects/keep
 delete mode 100644 src/web/src/app/resume/keep
 delete mode 100644 src/web/src/app/shop/keep
 create mode 100644 src/web/src/app/theme.jsx
 rename src/web/src/components/{navbar.jsx => header.jsx} (79%)
 create mode 100644 src/web/src/components/theme-toggle.jsx

diff --git a/src/web/.dockerignore b/src/web/.dockerignore
new file mode 100644
index 0000000..dcffab9
--- /dev/null
+++ b/src/web/.dockerignore
@@ -0,0 +1,17 @@
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+/coverage
+/.next/
+/out/
+/build
+.DS_Store
+*.pem
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.env*.local
+.vercel
+*.tsbuildinfo
+next-env.d.ts
diff --git a/src/web/package-lock.json b/src/web/package-lock.json
index bda1ce3..0c1a9ef 100644
--- a/src/web/package-lock.json
+++ b/src/web/package-lock.json
@@ -9,8 +9,10 @@
       "version": "0.1.0",
       "dependencies": {
         "next": "14.1.3",
+        "next-themes": "^0.3.0",
         "react": "^18",
-        "react-dom": "^18"
+        "react-dom": "^18",
+        "react-icons": "^5.0.1"
       },
       "devDependencies": {
         "autoprefixer": "^10.0.1",
@@ -3231,6 +3233,15 @@
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
+      "integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
@@ -3801,6 +3812,14 @@
         "react": "^18.2.0"
       }
     },
+    "node_modules/react-icons": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+      "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+      "peerDependencies": {
+        "react": "*"
+      }
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/src/web/package.json b/src/web/package.json
index 969eb59..a0f5974 100644
--- a/src/web/package.json
+++ b/src/web/package.json
@@ -9,15 +9,17 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "14.1.3",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
-    "next": "14.1.3"
+    "react-icons": "^5.0.1"
   },
   "devDependencies": {
     "autoprefixer": "^10.0.1",
-    "postcss": "^8",
-    "tailwindcss": "^3.3.0",
     "eslint": "^8",
-    "eslint-config-next": "14.1.3"
+    "eslint-config-next": "14.1.3",
+    "postcss": "^8",
+    "tailwindcss": "^3.3.0"
   }
 }
diff --git a/src/web/src/.gitignore b/src/web/src/.gitignore
new file mode 100644
index 0000000..fd3dbb5
--- /dev/null
+++ b/src/web/src/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/src/web/src/app/blog/keep b/src/web/src/app/blog/keep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/web/src/app/globals.css b/src/web/src/app/globals.css
new file mode 100644
index 0000000..a31e444
--- /dev/null
+++ b/src/web/src/app/globals.css
@@ -0,0 +1,3 @@
+@import 'tailwindcss/base';
+@import 'tailwindcss/components';
+@import 'tailwindcss/utilities';
diff --git a/src/web/src/app/layout.js b/src/web/src/app/layout.js
index 99f94ca..a99d2b5 100644
--- a/src/web/src/app/layout.js
+++ b/src/web/src/app/layout.js
@@ -1,6 +1,7 @@
 // Imports
-import '@/styles/tailwind.css';
-import NavBar from "@/components/navbar";
+import "@/styles/tailwind.css";
+import Theme from "@/app/theme";
+import Header from "@/components/header";
 import Footer from "@/components/footer";
 
 // Metadata
@@ -12,11 +13,15 @@ export const metadata = {
 // Exports
 export default function Layout({children}) {
   return (
-    <html lang="en">
+    <html lang="en" suppressHydrationWarning>
       <body>
-        <NavBar/>
-        <main>{children}</main>
-        <Footer/>
+        <Theme>
+          <Header />
+          <main className="dark:bg-red-1">
+            {children}
+          </main>
+          <Footer />
+        </Theme>
       </body>
     </html>
   );
diff --git a/src/web/src/app/page.jsx b/src/web/src/app/page.jsx
index f900075..7d379a0 100644
--- a/src/web/src/app/page.jsx
+++ b/src/web/src/app/page.jsx
@@ -1,10 +1,11 @@
 // Imports
+import ThemeToggle from "@/components/theme-toggle";
 
 // Metadata
 
 // Exports
 export default function Index() {
   return (
-    <h1>Test</h1>
+    <ThemeToggle />
   );
 }
diff --git a/src/web/src/app/projects/keep b/src/web/src/app/projects/keep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/web/src/app/resume/keep b/src/web/src/app/resume/keep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/web/src/app/shop/keep b/src/web/src/app/shop/keep
deleted file mode 100644
index e69de29..0000000
diff --git a/src/web/src/app/theme.jsx b/src/web/src/app/theme.jsx
new file mode 100644
index 0000000..b036794
--- /dev/null
+++ b/src/web/src/app/theme.jsx
@@ -0,0 +1,12 @@
+"use client"
+
+// Imports
+import { ThemeProvider} from "next-themes";
+
+export default function Theme({children}) {
+  return (
+    <ThemeProvider attribute="class">
+      {children}
+    </ThemeProvider>
+  )
+}
diff --git a/src/web/src/components/footer.jsx b/src/web/src/components/footer.jsx
index 040bd79..7f6db57 100644
--- a/src/web/src/components/footer.jsx
+++ b/src/web/src/components/footer.jsx
@@ -1,6 +1,6 @@
 const Footer = () => {
   return (
-    <h1>footer</h1>
+    <div className="dark:bg-red-1">Footer</div>
   );
 }
 
diff --git a/src/web/src/components/navbar.jsx b/src/web/src/components/header.jsx
similarity index 79%
rename from src/web/src/components/navbar.jsx
rename to src/web/src/components/header.jsx
index 1adca3a..664e7f8 100644
--- a/src/web/src/components/navbar.jsx
+++ b/src/web/src/components/header.jsx
@@ -26,13 +26,13 @@ const navItems= [
   }
 ]
 
-const NavBar = () => {
+const Header = () => {
 
   return (
-    <div className="text-3xl font-bold text-gray-800">
+    <div className="dark:bg-red-1">
       Navbar
     </div>
   );
 }
 
-export default NavBar;
+export default Header;
diff --git a/src/web/src/components/theme-toggle.jsx b/src/web/src/components/theme-toggle.jsx
new file mode 100644
index 0000000..425fafc
--- /dev/null
+++ b/src/web/src/components/theme-toggle.jsx
@@ -0,0 +1,34 @@
+"use client"
+
+// Imports
+import { FiSun, FiMoon } from "react-icons/fi"
+import { useState, useEffect } from 'react'
+import { useTheme } from 'next-themes'
+import Image from "next/image"
+
+export default function ThemeToggle() {
+  const [mounted, setMounted] = useState(false)
+  const { setTheme, resolvedTheme } = useTheme()
+
+  useEffect(() => setMounted(true), [])
+
+  if (!mounted) return (
+    <Image
+      src="data:image/svg+xml;base64,PHN2ZyBzdHJva2U9IiNGRkZGRkYiIGZpbGw9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMCIgdmlld0JveD0iMCAwIDI0IDI0IiBoZWlnaHQ9IjIwMHB4IiB3aWR0aD0iMjAwcHgiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjIwIiB4PSIyIiB5PSIyIiBmaWxsPSJub25lIiBzdHJva2Utd2lkdGg9IjIiIHJ4PSIyIj48L3JlY3Q+PC9zdmc+Cg=="
+      width={16}
+      height={16}
+      sizes="16x16"
+      alt="Loading Light/Dark Toggle"
+      priority={false}
+      title="Loading Light/Dark Toggle"
+    />
+  )
+
+  if (resolvedTheme === 'dark') {
+    return <FiSun onClick={() => setTheme('light')} />
+  }
+
+  if (resolvedTheme === 'light') {
+    return <FiMoon onClick={() => setTheme('dark')} />
+  }
+}
diff --git a/src/web/tailwind.config.js b/src/web/tailwind.config.js
index 8af87c1..998f225 100644
--- a/src/web/tailwind.config.js
+++ b/src/web/tailwind.config.js
@@ -1,13 +1,78 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: [
-    "./src/pages/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/components/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/app/**/*.{js,ts,jsx,tsx,mdx}",
-    "./src/**/*.{js,ts,jsx,tsx,mdx}"
+    "./src/pages/*.{js,ts,jsx,tsx,mdx}",
+    "./src/components/*.{js,ts,jsx,tsx,mdx}",
+    "./src/app/*.{js,ts,jsx,tsx,mdx}",
   ],
+  darkMode: 'class',
   theme: {
-    extend: {},
+    extend: {
+      colors: {
+        light:{
+          DEFAULT: "#fbf1c7",
+          red: {
+            1: "#cc241d",
+            2: "#9d0006"
+          },
+          orange: {
+            1: "#d65d0e", 
+            2: "#af3a03"
+          },
+          green: {
+            1: "#98971a",
+            2: "#79740e"
+          },
+          yellow: {
+            1: "#d79921",
+            2: "#b57614"
+          },
+          blue: {
+            1: "#458588",
+            2: "#076678"
+          },
+          purple: {
+            1: "#b16286",
+            2: "#8f3f71"
+          },
+          aqua: {
+            1: "#689d6a",
+            2: "#427b58"
+          },
+        },
+        dark: {
+          DEFAULT: "#282828",
+          red: {
+            1: "#cc241d",
+            2: "#fb4934"
+          },
+          orange: {
+            1: "#d65d0e",
+            2: "#fe8019"
+          },
+          green: {
+            1: "#98971a",
+            2: "#b8bb26"
+          },
+          yellow: {
+            1: "#d79921",
+            2: "#fabd2f"
+          },
+          blue: {
+            1: "#458588",
+            2: "#83a598"
+          },
+          purple: {
+            1: "#b16286",
+            2: "#d3869b"
+          },
+          aqua: {
+            1: "#689d6a",
+            2: "#8ec07c"
+          },
+        },
+      },
+    },
   },
   plugins: [],
 };