From 43bf3eabdf870d5f919166fdeb19246a8e0d07a2 Mon Sep 17 00:00:00 2001
From: Rafael Thayto <rafa.thayto@gmail.com>
Date: Mon, 8 Jul 2024 21:26:14 -0300
Subject: [PATCH] feat: some styles adjustments

---
 src/components/Footer/Footer.tsx              | 179 +++++++-----------
 src/components/Header/Header.tsx              |  13 +-
 .../theme-switcher/theme-switcher.tsx         |  92 +++++++++
 src/pages/index.tsx                           |   2 +-
 src/styles/globals.css                        |   7 +
 5 files changed, 178 insertions(+), 115 deletions(-)
 create mode 100644 src/components/theme-switcher/theme-switcher.tsx

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
index 007a757..779f8f3 100644
--- a/src/components/Footer/Footer.tsx
+++ b/src/components/Footer/Footer.tsx
@@ -1,106 +1,15 @@
 import { nanoid } from 'nanoid'
 import Link from 'next/link'
-import posthog from 'posthog-js'
 import { useMemo } from 'react'
-
-const sunIcon = (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="25"
-    height="24"
-    fill="none"
-    viewBox="0 0 25 24"
-    className="dark:opacity-50"
-  >
-    <g
-      stroke="#fff"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      clipPath="url(#clip0_192_823)"
-    >
-      <path d="M12.5 17a5 5 0 100-10 5 5 0 000 10zM12.5 1v2M12.5 21v2M4.72 4.22l1.42 1.42M18.86 18.36l1.42 1.42M1.5 12h2M21.5 12h2M4.72 19.78l1.42-1.42M18.86 5.64l1.42-1.42"></path>
-    </g>
-    <defs>
-      <clipPath id="clip0_192_823">
-        <path
-          className="fill-current text-white"
-          d="M0 0H24V24H0z"
-          transform="translate(.5)"
-        ></path>
-      </clipPath>
-    </defs>
-  </svg>
-)
-
-const moonIcon = (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="21"
-    height="20"
-    fill="none"
-    viewBox="0 0 21 20"
-  >
-    <path
-      stroke="#fff"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth="2"
-      className="stroke-current text-gray-400 dark:text-white"
-      d="M19.5 10.79A9 9 0 119.71 1a7 7 0 009.79 9.79v0z"
-    ></path>
-  </svg>
-)
-
-const ThemeSwitcher = () => {
-  return (
-    <div className="flex mt-6 bg-white justify-center dark:bg-gray-800 rounded-3xl p-1 shadow items-center">
-      <button
-        type="button"
-        aria-label="Use Dark Mode"
-        onClick={() => {
-          posthog.capture('switch-theme', {
-            from: 'dark-to-light',
-          })
-          window.umami.track('switch-theme', {
-            from: 'dark-to-light',
-          })
-          document.documentElement.classList.add('dark')
-          localStorage.setItem('theme', 'dark')
-        }}
-        className="flex items-center h-full pr-2 dark:bg-indigo-500 rounded-3xl justify-center align-center p-2 w-24 transition"
-      >
-        {moonIcon}
-      </button>
-
-      <button
-        type="button"
-        aria-label="Use Light Mode"
-        onClick={() => {
-          posthog.capture('switch-theme', {
-            from: 'light-to-dark',
-          })
-          window.umami.track('switch-theme', {
-            from: 'light-to-dark',
-          })
-          document.documentElement.classList.remove('dark')
-          localStorage.setItem('theme', 'light')
-        }}
-        className="flex items-center h-full pr-2 bg-indigo-500 dark:bg-transparent rounded-3xl justify-center align-center p-2 w-24 transition"
-      >
-        {sunIcon}
-      </button>
-    </div>
-  )
-}
+import { ThemeSwitcher } from '../theme-switcher/theme-switcher'
 
 type Link = {
   href: string
   name: string
 }
 
+const linkNanoId = nanoid()
 export const Footer = () => {
-  const linkNanoId = nanoid()
   const sitemapLinks = useMemo<Link[]>(
     () => [
       {
@@ -123,28 +32,78 @@ export const Footer = () => {
     [],
   )
 
+  const socialLinks = useMemo<Link[]>(
+    () => [
+      {
+        href: 'https://www.linkedin.com/in/thayto/',
+        name: 'LinkedIn',
+      },
+      {
+        href: 'https://github.com/rafa-thayto',
+        name: 'GitHub',
+      },
+      {
+        href: 'https://www.youtube.com/@thayto_dev',
+        name: 'YouTube',
+      },
+      {
+        href: 'https://www.twitch.tv/thayto_dev',
+        name: 'Twitch',
+      },
+      {
+        href: 'https://dev.to/thayto/',
+        name: 'Dev.to',
+      },
+      {
+        href: 'https://www.tabnews.com.br/thayto',
+        name: 'TabNews',
+      },
+    ],
+    [],
+  )
+
   return (
     <>
       <div className="flex flex-col items-center">
         <ThemeSwitcher />
       </div>
-      <footer className="border-t border-gray-200 bg-slate-50 dark:bg-gray-900 dark:border-black mt-10 flex justify-end">
-        <div className="px-20 py-14 md:px-32">
-          <h6 className="text-lg font-medium text-black dark:text-white">
-            Sitemap
-          </h6>
-          <ul className="mt-4">
-            {sitemapLinks.map((link) => (
-              <li key={`${link.name}-${linkNanoId}`} className="py-1">
-                <Link
-                  href={link.href}
-                  className="text-gray-500 dark:text-slate-500 underlined focus:outline-none inline-block whitespace-nowrap text-lg hover:text-gray-500 dark:hover:text-slate-500 focus:text-gray-500 dark:focus:text-slate-500"
-                >
-                  {link.name}
-                </Link>
-              </li>
-            ))}
-          </ul>
+      <footer className="border-t border-gray-200 bg-slate-50 dark:bg-gray-900 dark:border-black mt-10">
+        <div className="flex justify-end gap-20 mx-10vw">
+          <div className="py-14">
+            <h6 className="text-lg font-medium text-black dark:text-white">
+              Social
+            </h6>
+            <ul className="mt-4">
+              {socialLinks.map((link) => (
+                <li key={`${link.name}-${linkNanoId}`} className="py-1">
+                  <Link
+                    href={link.href}
+                    className="text-gray-500 dark:text-slate-500 underlined focus:outline-none inline-block whitespace-nowrap text-lg hover:text-gray-500 dark:hover:text-slate-500 focus:text-gray-500 dark:focus:text-slate-500"
+                  >
+                    {link.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
+
+          <div className="py-14">
+            <h6 className="text-lg font-medium text-black dark:text-white">
+              Sitemap
+            </h6>
+            <ul className="mt-4">
+              {sitemapLinks.map((link) => (
+                <li key={`${link.name}-${linkNanoId}`} className="py-1">
+                  <Link
+                    href={link.href}
+                    className="text-gray-500 dark:text-slate-500 underlined focus:outline-none inline-block whitespace-nowrap text-lg hover:text-gray-500 dark:hover:text-slate-500 focus:text-gray-500 dark:focus:text-slate-500"
+                  >
+                    {link.name}
+                  </Link>
+                </li>
+              ))}
+            </ul>
+          </div>
         </div>
       </footer>
     </>
diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
index 38384ef..88a8bb8 100644
--- a/src/components/Header/Header.tsx
+++ b/src/components/Header/Header.tsx
@@ -4,6 +4,7 @@ import { nanoid } from 'nanoid'
 import Link from 'next/link'
 import { Fragment, useEffect, useRef, useState } from 'react'
 import ReactConfetti from 'react-confetti'
+import { ThemeSwitcher } from '../theme-switcher/theme-switcher'
 
 export const Header = () => {
   const navbarId = nanoid()
@@ -54,7 +55,8 @@ export const Header = () => {
         />
       )}
       <Popover>
-        <div className="relative px-4 sm:px-6 lg:px-8 py-4 lg:py-6 bg-slate-50 dark:bg-gray-900 shadow dark:shadow-black dark:border-black">
+        <div className="relative px-4 sm:px-6 lg:px-40 py-4 lg:py-6 bg-slate-50 dark:bg-gray-900 flex justify-between align-center">
+          <div className="w-28 hidden md:block" />
           <nav
             className="relative flex items-center justify-between sm:h-10 lg:justify-center"
             aria-label="Global"
@@ -82,6 +84,10 @@ export const Header = () => {
               ))}
             </div>
           </nav>
+
+          <div className="w-28">
+            <ThemeSwitcher />
+          </div>
         </div>
 
         <Transition
@@ -97,9 +103,8 @@ export const Header = () => {
             focus
             className="absolute z-10 top-0 inset-x-0 p-2 transition transform origin-top-right md:hidden"
           >
-            <div className="rounded-lg shadow-md bg-white dark:bg-gray-900 ring-1 ring-black ring-opacity-5 overflow-hidden">
-              <div className="px-5 pt-4 flex items-center justify-between">
-                <div />
+            <div className="rounded-lg bg-white dark:bg-gray-900 ring-1 ring-black ring-opacity-5 overflow-hidden">
+              <div className="px-5 pt-4 flex items-center justify-end">
                 <div className="-mr-2">
                   <Popover.Button className="bg-white dark:bg-gray-900 rounded-md p-2 inline-flex items-center justify-center text-gray-400  hover:bg-gray-100 dark:hover:bg-slate-800 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-indigo-500">
                     <span className="sr-only">Close main menu</span>
diff --git a/src/components/theme-switcher/theme-switcher.tsx b/src/components/theme-switcher/theme-switcher.tsx
new file mode 100644
index 0000000..63e2902
--- /dev/null
+++ b/src/components/theme-switcher/theme-switcher.tsx
@@ -0,0 +1,92 @@
+import posthog from 'posthog-js'
+
+const sunIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="25"
+    height="24"
+    fill="none"
+    viewBox="0 0 25 24"
+    className="dark:opacity-50"
+  >
+    <g
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      clipPath="url(#clip0_192_823)"
+    >
+      <path d="M12.5 17a5 5 0 100-10 5 5 0 000 10zM12.5 1v2M12.5 21v2M4.72 4.22l1.42 1.42M18.86 18.36l1.42 1.42M1.5 12h2M21.5 12h2M4.72 19.78l1.42-1.42M18.86 5.64l1.42-1.42"></path>
+    </g>
+    <defs>
+      <clipPath id="clip0_192_823">
+        <path
+          className="fill-current text-white"
+          d="M0 0H24V24H0z"
+          transform="translate(.5)"
+        ></path>
+      </clipPath>
+    </defs>
+  </svg>
+)
+
+const moonIcon = (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="21"
+    height="20"
+    fill="none"
+    viewBox="0 0 21 20"
+  >
+    <path
+      stroke="#fff"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      className="stroke-current text-gray-400 dark:text-white"
+      d="M19.5 10.79A9 9 0 119.71 1a7 7 0 009.79 9.79v0z"
+    ></path>
+  </svg>
+)
+
+export const ThemeSwitcher = () => {
+  return (
+    <div className="flex bg-white justify-center dark:bg-gray-800 rounded-3xl p-1 shadow items-center">
+      <button
+        type="button"
+        aria-label="Use Dark Mode"
+        onClick={() => {
+          posthog.capture('switch-theme', {
+            from: 'dark-to-light',
+          })
+          window.umami.track('switch-theme', {
+            from: 'dark-to-light',
+          })
+          document.documentElement.classList.add('dark')
+          localStorage.setItem('theme', 'dark')
+        }}
+        className="flex items-center h-full pr-2 dark:bg-indigo-500 rounded-3xl justify-center align-center p-2 w-24 transition"
+      >
+        {moonIcon}
+      </button>
+
+      <button
+        type="button"
+        aria-label="Use Light Mode"
+        onClick={() => {
+          posthog.capture('switch-theme', {
+            from: 'light-to-dark',
+          })
+          window.umami.track('switch-theme', {
+            from: 'light-to-dark',
+          })
+          document.documentElement.classList.remove('dark')
+          localStorage.setItem('theme', 'light')
+        }}
+        className="flex items-center h-full pr-2 bg-indigo-500 dark:bg-transparent rounded-3xl justify-center align-center p-2 w-24 transition"
+      >
+        {sunIcon}
+      </button>
+    </div>
+  )
+}
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index a3a1c39..48369a7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -37,7 +37,7 @@ const IndexPage = () => {
         }}
       />
 
-      <main className="max-w-6xl mx-auto mt-6 shadow bg-slate-50 dark:bg-gray-800 py-6 px-4 sm:px-12">
+      <main className="max-w-6xl mx-auto mt-6 shadow dark:shadow-black bg-slate-50 dark:bg-gray-800 py-6 px-4 sm:px-12">
         <div className="flex mt-2 items-center justify-items-center justify-center flex-col sm:flex-row">
           <div className="relative w-52 h-52 ">
             <Image
diff --git a/src/styles/globals.css b/src/styles/globals.css
index d0f135e..e959367 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -2,6 +2,13 @@
 @tailwind components;
 @tailwind utilities;
 
+@layer components {
+  .mx-10vw {
+    margin-left: 10vw;
+    margin-right: 10vw;
+  }
+}
+
 .underlined {
   position: relative;
   text-decoration: none !important;