dark mode and a few explorations

MarcoEscaleira · Aug 19, 2023 · a072ace · a072ace
1 parent 4408384
commit a072ace
Show file tree

Hide file tree

Showing 12 changed files with 145 additions and 47 deletions.
diff --git a/components/Header.tsx b/components/Header.tsx
@@ -3,6 +3,7 @@ import { HomeIcon } from "@heroicons/react/24/outline";
 import { NextFont } from "@next/font/dist/types";
 import { useRouter } from "next/router";
 import Link from "next/link";
+import { ThemeSwitcher } from "@/components/ThemeSwitcher";
 
 interface IHeaderProps {
   font: NextFont;
@@ -13,26 +14,31 @@ const Header: FC<IHeaderProps> = ({ font }) => {
 
   return (
     <header className={font.className}>
-      <div className="w-full h-16 flex items-center px-4 bg-amber-400">
-        <HomeIcon className="w-8 accent-blue-500" />
-        <nav className="flex gap-4 ml-4">
-          {[
-            ["Home", "/"],
-            ["Portfolio", "/portfolio"],
-            ["About", "/about"],
-          ].map(([title, path]) => {
-            const isActiveClass = router.pathname === path ? "bg-slate-100" : "";
-            return (
-              <Link
-                key={path}
-                href={path}
-                className={`rounded-lg px-3 py-2 text-slate-700 font-medium hover:bg-slate-100 hover:text-slate-900 ${isActiveClass}`}
-              >
-                {title}
-              </Link>
-            );
-          })}
-        </nav>
+      <div className="w-full h-16 flex items-center justify-between px-4">
+        <section className='flex items-center'>
+          <HomeIcon className="w-8 accent-blue-500" />
+          <nav className="flex gap-4 ml-4">
+            {[
+              ["Home", "/"],
+              ["Portfolio", "/portfolio"],
+              ["Contact", "/contact"],
+            ].map(([title, path]) => {
+              const isActiveClass = router.pathname === path ? "bg-white text-slate-900" : "";
+              return (
+                <Link
+                  key={path}
+                  href={path}
+                  className={`rounded-lg px-3 py-2 font-medium hover:bg-slate-100 hover:text-slate-900 ${isActiveClass}`}
+                >
+                  {title}
+                </Link>
+              );
+            })}
+          </nav>
+        </section>
+        <section>
+          <ThemeSwitcher />
+        </section>
       </div>
     </header>
   );

diff --git a/components/ThemeSwitcher.tsx b/components/ThemeSwitcher.tsx
@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+import { useTheme } from "next-themes";
+import { MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+
+export const ThemeSwitcher = () => {
+  const [mounted, setMounted] = useState(false);
+  const { theme, setTheme } = useTheme();
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return null;
+  }
+
+  return (
+    <button
+      className={`p-1 rounded-md hover:scale-110 active:scale-100 duration-200 dark:bg-[#212933]`}
+      onClick={() => setTheme(theme === "dark" ? "light" : "dark")}
+    >
+      {theme === "light" ? <MoonIcon className="w-4" /> : <SunIcon className="w-4" />}
+    </button>
+  );
+};
diff --git a/components/layout.tsx b/components/layout.tsx
@@ -1,4 +1,5 @@
 import Head from "next/head";
+import { ThemeProvider } from "next-themes";
 import { NextFont } from "@next/font/dist/types";
 import Header from "@/components/Header";
 
@@ -15,13 +16,17 @@ export default function Layout({ children, font }: LayoutProps) {
         <link rel="icon" href="/logo.png" />
       </Head>
 
-      <Header font={font} />
+      <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+        <div className="w-full h-screen bg-gradient-to-r from-blue-600 via-blue-800 to-blue-900 dark:from-gray-700 dark:via-gray-800 dark:to-gray-900 text-gray-100 dark:text-white">
+          <Header font={font} />
 
-      <main className={font.className}>{children}</main>
+          <main className={font.className}>{children}</main>
 
-      <footer className={font.className}>
-        <p>Powered by Marco Escaleira</p>
-      </footer>
+          <footer className={font.className}>
+            <p>Powered by Marco Escaleira</p>
+          </footer>
+        </div>
+      </ThemeProvider>
     </>
   );
 }
diff --git a/components/theme-provider.tsx b/components/theme-provider.tsx
@@ -0,0 +1,7 @@
+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>;
+}
diff --git a/package.json b/package.json
@@ -13,6 +13,7 @@
     "@heroicons/react": "^2.0.18",
     "@next/font": "^13.4.18",
     "next": "^13.4.18",
+    "next-themes": "^0.2.1",
     "normalize.css": "^8.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"

diff --git a/pages/about.tsx b/pages/about.tsx
diff --git a/pages/contact.tsx b/pages/contact.tsx
@@ -0,0 +1,70 @@
+export default function Contact() {
+  return (
+    <section className="w-full min-h-screen bg-white dark:bg-gray-900 lg:flex">
+      <div className="flex flex-col justify-center w-full p-8 lg:bg-gray-100 lg:dark:bg-gray-800 lg:px-12 xl:px-32 lg:w-1/2">
+        <h1 className="text-2xl font-semibold text-gray-800 capitalize dark:text-white lg:text-3xl">contact me.</h1>
+
+        <p className="mt-4 text-gray-500 dark:text-gray-400">Ask me everything and I would love to hear from you</p>
+
+        <div className="mt-6 md:mt-8">
+          <h3 className="font-medium text-gray-600 dark:text-gray-300">Follow me</h3>
+
+          <div className="flex mt-4 -mx-1.5">
+            <a
+              className="mx-1.5 dark:hover:text-blue-400 text-gray-400 transition-colors duration-300 transform hover:text-blue-500"
+              href="#"
+            >
+              <svg className="w-8 h-8" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="M15.2 8.80005C16.4731 8.80005 17.694 9.30576 18.5941 10.2059C19.4943 11.1061 20 12.327 20 13.6V19.2H16.8V13.6C16.8 13.1757 16.6315 12.7687 16.3314 12.4687C16.0313 12.1686 15.6244 12 15.2 12C14.7757 12 14.3687 12.1686 14.0687 12.4687C13.7686 12.7687 13.6 13.1757 13.6 13.6V19.2H10.4V13.6C10.4 12.327 10.9057 11.1061 11.8059 10.2059C12.7061 9.30576 13.927 8.80005 15.2 8.80005Z"
+                  fill="currentColor"
+                />
+                <path d="M7.2 9.6001H4V19.2001H7.2V9.6001Z" fill="currentColor" />
+                <path
+                  d="M5.6 7.2C6.48366 7.2 7.2 6.48366 7.2 5.6C7.2 4.71634 6.48366 4 5.6 4C4.71634 4 4 4.71634 4 5.6C4 6.48366 4.71634 7.2 5.6 7.2Z"
+                  fill="currentColor"
+                />
+              </svg>
+            </a>
+          </div>
+        </div>
+      </div>
+
+      <div className="flex flex-col justify-center w-full p-8 pt-0 lg:w-1/2 lg:px-12 xl:px-24 ">
+        <form>
+          <div className="-mx-2 md:items-center md:flex">
+            <div className="flex-1 px-2">
+              <label className="block mb-2 text-sm text-gray-600 dark:text-gray-200">Full Name</label>
+              <input
+                type="text"
+                placeholder="John Doe"
+                className="block w-full px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"
+              />
+            </div>
+
+            <div className="flex-1 px-2 mt-4 md:mt-0">
+              <label className="block mb-2 text-sm text-gray-600 dark:text-gray-200">Email address</label>
+              <input
+                type="email"
+                placeholder="[email protected]"
+                className="block w-full px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"
+              />
+            </div>
+          </div>
+
+          <div className="w-full mt-4">
+            <label className="block mb-2 text-sm text-gray-600 dark:text-gray-200">Message</label>
+            <textarea
+              className="block w-full h-32 px-5 py-3 mt-2 text-gray-700 placeholder-gray-400 bg-white border border-gray-200 rounded-md md:h-56 dark:placeholder-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:border-gray-700 focus:border-blue-400 dark:focus:border-blue-400 focus:ring-blue-400 focus:outline-none focus:ring focus:ring-opacity-40"
+              placeholder="Message"
+            ></textarea>
+          </div>
+
+          <button className="w-full px-6 py-3 mt-4 text-sm font-medium tracking-wide text-white capitalize transition-colors duration-300 transform bg-blue-500 rounded-md hover:bg-blue-400 focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-50">
+            get in touch
+          </button>
+        </form>
+      </div>
+    </section>
+  );
+}
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,6 +1,3 @@
-import Head from "next/head";
-import Image from "next/image";
-
 export default function Home() {
   return (
     <div>

diff --git a/pages/portfolio.tsx b/pages/portfolio.tsx
@@ -1,6 +1,3 @@
-import Head from "next/head";
-import Image from "next/image";
-
 export default function Portfolio() {
   return (
     <div>

diff --git a/public/vercel.svg b/public/vercel.svg
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
     './components/**/*.{js,ts,jsx,tsx}',
     './app/**/*.{js,ts,jsx,tsx}',
   ],
+  darkMode: 'class',
   theme: {
     extend: {
       fontFamily: {

diff --git a/yarn.lock b/yarn.lock
@@ -3937,6 +3937,11 @@ natural-compare@^1.4.0:
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
+next-themes@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.2.1.tgz#0c9f128e847979daf6c67f70b38e6b6567856e45"
+  integrity sha512-B+AKNfYNIzh0vqQQKqQItTS8evEouKD7H5Hj3kmuPERwddR2TxvDSFZuTj6T7Jfn1oyeUyJMydPl1Bkxkh0W7A==
+
 next@^13.4.18:
   version "13.4.18"
   resolved "https://registry.yarnpkg.com/next/-/next-13.4.18.tgz#27a06093867d4b874cbb4ebb552ccd3d3ee26fe7"