feat: theme switcher adjustments, add some logos, update linktree, ad…

…d bsky link
rafa-thayto · Sep 1, 2024 · 72ea46e · 72ea46e
1 parent cb90231
commit 72ea46e
Show file tree

Hide file tree

Showing 13 changed files with 180 additions and 95 deletions.
diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -9,7 +9,12 @@ type Link = {
 }
 
 const linkNanoId = nanoid()
-export const Footer = () => {
+
+export const Footer = ({
+  onThemeChange,
+}: {
+  onThemeChange?: (theme: 'dark' | 'light') => void
+}) => {
   const sitemapLinks = useMemo<Link[]>(
     () => [
       {
@@ -65,7 +70,7 @@ export const Footer = () => {
   return (
     <>
       <div className="flex flex-col items-center mt-10">
-        <ThemeSwitcher />
+        <ThemeSwitcher onThemeChange={onThemeChange} />
       </div>
       <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">

diff --git a/src/components/Icons/Bsky.tsx b/src/components/Icons/Bsky.tsx
@@ -0,0 +1,16 @@
+import { IconProps } from './types'
+
+export const Bsky = ({ color }: IconProps) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    style={{ color: color || '#121212' }}
+    height="24px"
+    width="24px"
+    aria-label="Bluesky"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 576 512"
+  >
+    <path d="M407.8 294.7c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3zM288 227.1C261.9 176.4 190.9 81.9 124.9 35.3C61.6-9.4 37.5-1.7 21.6 5.5C3.3 13.8 0 41.9 0 58.4S9.1 194 15 213.9c19.5 65.7 89.1 87.9 153.2 80.7c3.3-.5 6.6-.9 10-1.4c-3.3 .5-6.6 1-10 1.4C74.3 308.6-9.1 342.8 100.3 464.5C220.6 589.1 265.1 437.8 288 361.1c22.9 76.7 49.2 222.5 185.6 103.4c102.4-103.4 28.1-156-65.8-169.9c-3.3-.4-6.7-.8-10-1.3c3.4 .4 6.7 .9 10 1.3c64.1 7.1 133.6-15.1 153.2-80.7C566.9 194 576 75 576 58.4s-3.3-44.7-21.6-52.9c-15.8-7.1-40-14.9-103.2 29.8C385.1 81.9 314.1 176.4 288 227.1z" />
+  </svg>
+)
diff --git a/src/components/Icons/DevTo.tsx b/src/components/Icons/DevTo.tsx
@@ -1,4 +1,6 @@
-export const DevTo = () => (
+import { IconProps } from './types'
+
+export const DevTo = ({}: IconProps) => (
   <svg
     xmlns="https://www.w3.org/2000/svg"
     aria-label="dev.to"

diff --git a/src/components/Icons/GitHub.tsx b/src/components/Icons/GitHub.tsx
@@ -1,10 +1,12 @@
-export const GitHub = () => (
+import { IconProps } from './types'
+
+export const GitHub = ({ color }: IconProps) => (
   <svg
     stroke="currentColor"
     fill="currentColor"
     strokeWidth="0"
     viewBox="0 0 496 512"
-    style={{ color: '#121212' }}
+    style={{ color: color || '#121212' }}
     height="24px"
     width="24px"
     xmlns="https://www.w3.org/2000/svg"

diff --git a/src/components/Icons/LinkedIn.tsx b/src/components/Icons/LinkedIn.tsx
@@ -1,10 +1,12 @@
-export const LinkedIn = () => (
+import { IconProps } from './types'
+
+export const LinkedIn = ({ color }: IconProps) => (
   <svg
     stroke="currentColor"
     fill="currentColor"
     strokeWidth="0"
     viewBox="0 0 448 512"
-    style={{ color: '#121212' }}
+    style={{ color: color || '#121212' }}
     height="24px"
     width="24px"
     xmlns="https://www.w3.org/2000/svg"

diff --git a/src/components/Icons/Medium.tsx b/src/components/Icons/Medium.tsx
@@ -1,10 +1,12 @@
-export const Medium = () => (
+import { IconProps } from './types'
+
+export const Medium = ({ color }: IconProps) => (
   <svg
     stroke="currentColor"
     fill="currentColor"
     strokeWidth="0"
     viewBox="0 0 512 512"
-    style={{ color: '#121212' }}
+    style={{ color: color || '#121212' }}
     height="24px"
     width="24px"
     xmlns="https://www.w3.org/2000/svg"

diff --git a/src/components/Icons/TabNews.tsx b/src/components/Icons/TabNews.tsx
@@ -1,10 +1,12 @@
-export const TabNews = () => (
+import { IconProps } from './types'
+
+export const TabNews = ({ color }: IconProps) => (
   <svg
     stroke="currentColor"
     fill="none"
     strokeWidth="0"
     viewBox="0 0 24 24"
-    style={{ color: '#121212' }}
+    style={{ color: color || '#121212' }}
     height="24px"
     width="24px"
     xmlns="https://www.w3.org/2000/svg"

diff --git a/src/components/Icons/Twitch.tsx b/src/components/Icons/Twitch.tsx
@@ -0,0 +1,18 @@
+import { IconProps } from './types'
+
+export const Twitch = ({ color }: IconProps) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 16 16"
+    style={{ color: color || '#121212' }}
+    height="24px"
+    width="24px"
+    xmlns="https://www.w3.org/2000/svg"
+    aria-label="Twitter"
+  >
+    <path d="M3.857 0 1 2.857v10.286h3.429V16l2.857-2.857H9.57L14.714 8V0zm9.714 7.429-2.285 2.285H9l-2 2v-2H4.429V1.143h9.142z" />
+    <path d="M11.857 3.143h-1.143V6.57h1.143zm-3.143 0H7.571V6.57h1.143z" />
+  </svg>
+)
diff --git a/src/components/Icons/Twitter.tsx b/src/components/Icons/Twitter.tsx
@@ -1,10 +1,12 @@
-export const Twitter = () => (
+import { IconProps } from './types'
+
+export const Twitter = ({ color }: IconProps) => (
   <svg
     stroke="currentColor"
     fill="currentColor"
     strokeWidth="0"
     viewBox="0 0 30 30"
-    style={{ color: '#121212' }}
+    style={{ color: color || '#121212' }}
     height="24px"
     width="24px"
     xmlns="https://www.w3.org/2000/svg"

diff --git a/src/components/Icons/YouTube.tsx b/src/components/Icons/YouTube.tsx
@@ -0,0 +1,17 @@
+import { IconProps } from './types'
+
+export const YouTube = ({ color }: IconProps) => (
+  <svg
+    stroke="currentColor"
+    fill="currentColor"
+    strokeWidth="0"
+    viewBox="0 0 16 16"
+    style={{ color: color || '#121212' }}
+    height="24px"
+    width="24px"
+    xmlns="https://www.w3.org/2000/svg"
+    aria-label="Twitter"
+  >
+    <path d="M8.051 1.999h.089c.822.003 4.987.033 6.11.335a2.01 2.01 0 0 1 1.415 1.42c.101.38.172.883.22 1.402l.01.104.022.26.008.104c.065.914.073 1.77.074 1.957v.075c-.001.194-.01 1.108-.082 2.06l-.008.105-.009.104c-.05.572-.124 1.14-.235 1.558a2.01 2.01 0 0 1-1.415 1.42c-1.16.312-5.569.334-6.18.335h-.142c-.309 0-1.587-.006-2.927-.052l-.17-.006-.087-.004-.171-.007-.171-.007c-1.11-.049-2.167-.128-2.654-.26a2.01 2.01 0 0 1-1.415-1.419c-.111-.417-.185-.986-.235-1.558L.09 9.82l-.008-.104A31 31 0 0 1 0 7.68v-.123c.002-.215.01-.958.064-1.778l.007-.103.003-.052.008-.104.022-.26.01-.104c.048-.519.119-1.023.22-1.402a2.01 2.01 0 0 1 1.415-1.42c.487-.13 1.544-.21 2.654-.26l.17-.007.172-.006.086-.003.171-.007A100 100 0 0 1 7.858 2zM6.4 5.209v4.818l4.157-2.408z" />
+  </svg>
+)
diff --git a/src/components/Icons/types.ts b/src/components/Icons/types.ts
@@ -0,0 +1,3 @@
+export type IconProps = {
+  color?: string
+}
diff --git a/src/components/theme-switcher/theme-switcher.tsx b/src/components/theme-switcher/theme-switcher.tsx
@@ -49,7 +49,11 @@ const moonIcon = (
   </svg>
 )
 
-export const ThemeSwitcher = () => {
+type ThemeSwitcherProps = {
+  onThemeChange?: (theme: 'dark' | 'light') => void
+}
+
+export const ThemeSwitcher = ({ onThemeChange }: ThemeSwitcherProps) => {
   return (
     <div className="flex bg-white justify-center dark:bg-gray-800 rounded-3xl p-1 shadow items-center">
       <button
@@ -64,6 +68,7 @@ export const ThemeSwitcher = () => {
           })
           document.documentElement.classList.add('dark')
           localStorage.setItem('theme', 'dark')
+          onThemeChange?.('dark')
         }}
         className="flex items-center h-full pr-2 dark:bg-indigo-500 rounded-3xl justify-center align-center p-2 w-24 transition"
       >
@@ -82,6 +87,7 @@ export const ThemeSwitcher = () => {
           })
           document.documentElement.classList.remove('dark')
           localStorage.setItem('theme', 'light')
+          onThemeChange?.('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"
       >

diff --git a/src/pages/linktree.tsx b/src/pages/linktree.tsx
@@ -1,89 +1,97 @@
-import {
-  DevTo,
-  Footer,
-  GitHub,
-  LinkedIn,
-  Medium,
-  TabNews,
-  Twitter,
-} from '@/components'
+import { DevTo, Footer, GitHub, LinkedIn, TabNews, Twitter } from '@/components'
+import { Bsky } from '@/components/Icons/Bsky'
+import { Twitch } from '@/components/Icons/Twitch'
+import { IconProps } from '@/components/Icons/types'
+import { YouTube } from '@/components/Icons/YouTube'
 import { NextSeo } from 'next-seo'
 import Image from 'next/image'
 import Link from 'next/link'
 import posthog from 'posthog-js'
+import { useState } from 'react'
+
+type ButtonLink = {
+  href: string
+  Icon?: (({ color }: IconProps) => JSX.Element) | null
+  text: string
+}
+
+const links: ButtonLink[] = [
+  {
+    href: 'https://podcasters.spotify.com/pod/show/devseniorscast',
+    Icon: null,
+    text: '🎙️ DevSenior Cast',
+  },
+  {
+    href: 'https://bit.ly/3nLnPQZ',
+    Icon: null,
+    text: 'CRUD com qualidade - Curso DevSoutinho',
+  },
+  {
+    href: 'https://github.com/rafa-thayto/lazy-thayto-vim',
+    Icon: null,
+    text: '❤️ Neovim Configs',
+  },
+  {
+    href: '/blog',
+    Icon: null,
+    text: 'Blog',
+  },
+  {
+    href: 'https://www.linkedin.com/in/thayto/',
+    Icon: LinkedIn,
+    text: 'LinkedIn',
+  },
+  {
+    href: 'https://www.youtube.com/@thayto_dev',
+    Icon: YouTube,
+    text: 'Youtube',
+  },
+  {
+    href: 'https://github.com/rafa-thayto',
+    Icon: GitHub,
+    text: 'GitHub',
+  },
+  {
+    href: 'https://bsky.app/profile/thayto.dev',
+    Icon: Bsky,
+    text: 'Bluesky',
+  },
+  {
+    href: 'https://twitch.tv/thayto_dev',
+    Icon: Twitch,
+    text: 'Twitch',
+  },
+  {
+    href: 'https://www.amazon.com.br/dp/8575226932?&_encoding=UTF8&tag=thayto-20&linkCode=ur2&linkId=a8887fab2c901ae25fb1855a72f0bc61&camp=1789&creative=9325',
+    Icon: null,
+    text: 'Estrutura de dados e algoritmos com JavaScript - Loiane',
+  },
+  {
+    href: 'https://dev.to/thayto/',
+    Icon: DevTo,
+    text: 'Dev.to',
+  },
+  {
+    href: 'https://www.tabnews.com.br/thayto',
+    Icon: TabNews,
+    text: 'TabNews',
+  },
+  {
+    href: 'https://twitter.com/thayto_dev',
+    Icon: Twitter,
+    text: 'Twitter',
+  },
+]
+
+const description = 'Minha árvore de links'
 
 const LinksPage = () => {
-  const description = 'Minha árvore de links'
+  const [theme, setTheme] = useState<'dark' | 'light'>('dark')
 
-  type ButtonLink = {
-    href: string
-    Icon?: (() => JSX.Element) | null
-    text: string
+  const handleThemeChange = (theme: 'dark' | 'light') => {
+    setTheme(theme)
   }
 
-  const links: ButtonLink[] = [
-    {
-      href: 'https://podcasters.spotify.com/pod/show/devseniorscast',
-      Icon: null,
-      text: '🎙️ DevSenior Cast',
-    },
-    {
-      href: 'https://bit.ly/3nLnPQZ',
-      Icon: null,
-      text: 'CRUD com qualidade - Curso DevSoutinho',
-    },
-    {
-      href: 'https://github.com/rafa-thayto/lazy-thayto-vim',
-      Icon: null,
-      text: '❤️ Neovim Configs',
-    },
-    {
-      href: '/blog',
-      Icon: null,
-      text: 'Blog',
-    },
-    {
-      href: 'https://www.linkedin.com/in/thayto/',
-      Icon: LinkedIn,
-      text: 'LinkedIn',
-    },
-    {
-      href: 'https://www.youtube.com/@thayto_dev',
-      Icon: null,
-      text: 'Youtube',
-    },
-    {
-      href: 'https://github.com/rafa-thayto',
-      Icon: GitHub,
-      text: 'GitHub',
-    },
-    {
-      href: 'https://twitter.com/thayto_dev',
-      Icon: Twitter,
-      text: 'Twitter',
-    },
-    {
-      href: 'https://twitch.tv/thayto_dev',
-      Icon: null,
-      text: 'Twitch',
-    },
-    {
-      href: 'https://www.amazon.com.br/dp/8575226932?&_encoding=UTF8&tag=thayto-20&linkCode=ur2&linkId=a8887fab2c901ae25fb1855a72f0bc61&camp=1789&creative=9325',
-      Icon: null,
-      text: 'Estrutura de dados e algoritmos com JavaScript - Loiane',
-    },
-    {
-      href: 'https://dev.to/thayto/',
-      Icon: DevTo,
-      text: 'Dev.to',
-    },
-    {
-      href: 'https://www.tabnews.com.br/thayto',
-      Icon: TabNews,
-      text: 'TabNews',
-    },
-  ]
-
   return (
     <>
       <NextSeo
@@ -148,17 +156,17 @@ const LinksPage = () => {
                   })
                 }}
               >
-                {text}
                 {Icon && (
-                  <span className="ml-4">
-                    <Icon />
+                  <span className="mr-4">
+                    <Icon color={theme === 'dark' ? '#fff' : '#121212'} />
                   </span>
                 )}
+                {text}
               </Link>
             ))}
           </main>
         </div>
-        <Footer />
+        <Footer onThemeChange={handleThemeChange} />
       </div>
     </>
   )