Skip to content

Commit

Permalink
feat: some styles adjustments
Browse files Browse the repository at this point in the history
  • Loading branch information
@rafa-thayto
rafa-thayto committed Jul 9, 2024
1 parent 155aaff commit 43bf3ea
Show file tree
Hide file tree
Showing 5 changed files with 178 additions and 115 deletions.
179 changes: 69 additions & 110 deletions src/components/Footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -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[]>(
() => [
{
Expand All @@ -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>
</>
Expand Down
13 changes: 9 additions & 4 deletions src/components/Header/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -82,6 +84,10 @@ export const Header = () => {
))}
</div>
</nav>

<div className="w-28">
<ThemeSwitcher />
</div>
</div>

<Transition
Expand All @@ -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>
Expand Down
92 changes: 92 additions & 0 deletions src/components/theme-switcher/theme-switcher.tsx
View file
Original file line number Diff line number Diff line change
@@ -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>
)
}
2 changes: 1 addition & 1 deletion src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
7 changes: 7 additions & 0 deletions src/styles/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit 43bf3ea

Please sign in to comment.