r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-14 20:05:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Compare commits

base: r-freeman:e0a645ab6206e26b37bf29fa6dc0f8b2e0d7601c
Branches Tags
r-freeman:main
...
compare: r-freeman:cf437a4c99f9e749cabab04e63e4a23d0067fb27
Branches Tags
r-freeman:main

2 Commits
e0a645ab62 ... cf437a4c99

Author SHA1 Message Date
Ryan Freeman
cf437a4c99 Update ThemeButton
All checks were successful
Build And Publish / BuildAndPublish (push) Successful in 2m39s
Details
2024-09-27 21:50:48 +01:00
Ryan Freeman
fd184a5973 Update Card 2024-09-27 21:50:32 +01:00
2 changed files with 5 additions and 16 deletions
Show Stats Expand all files Collapse all files

2
components/ui/Card.tsx
View File

@ -89,7 +89,7 @@ Card.Link = function CardLink({href, children}: CardLink) {
Card.Title = function CardTitle({as: Component = 'h2', href, children}: CardTitle) { Card.Title = function CardTitle({as: Component = 'h2', href, children}: CardTitle) {
return ( return (
<Component className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"> <Component className="group-hover:text-indigo-500 text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100">
{href ? <Card.Link href={href}>{children}</Card.Link> : children} {href ? <Card.Link href={href}>{children}</Card.Link> : children}
</Component> </Component>
) )

19
components/ui/ThemeButton.tsx
View File

@ -7,33 +7,22 @@ import {MoonIcon} from '@/components/icons/MoonIcon'
export function ThemeButton() { export function ThemeButton() {
const [mounted, setMounted] = useState(false) const [mounted, setMounted] = useState(false)
const {theme, setTheme} = useTheme() const {resolvedTheme, setTheme} = useTheme()
let otherTheme = resolvedTheme === 'dark' ? 'light' : 'dark'
useEffect(() => { useEffect(() => {
const timeout = setTimeout(() => setMounted(true), 500) const timeout = setTimeout(() => setMounted(true), 500)
return () => clearTimeout(timeout) return () => clearTimeout(timeout)
}, []) }, [])
function toggleTheme() {
let darkModeMediaQuery = window.matchMedia('(prefers-color-scheme: dark)')
let isSystemDarkMode = darkModeMediaQuery.matches
let isDarkMode = theme === 'dark'
if (isDarkMode === isSystemDarkMode) {
setTheme('light')
} else {
setTheme('dark')
}
}
if (!mounted) return <ThemeButton.Skeleton/> if (!mounted) return <ThemeButton.Skeleton/>
return ( return (
<button <button
type="button" type="button"
aria-label="Toggle dark mode" aria-label={mounted ? `Switch to ${otherTheme} theme` : 'Toggle theme'}
className="group rounded-full bg-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20" className="group rounded-full bg-white/90 px-3 py-2 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur transition dark:bg-zinc-800/90 dark:ring-white/10 dark:hover:ring-white/20"
onClick={() => toggleTheme()} onClick={() => setTheme(otherTheme)}
> >
<SunIcon <SunIcon
className="h-6 w-6 fill-zinc-100 stroke-zinc-500 transition group-hover:fill-zinc-200 group-hover:stroke-zinc-700 dark:hidden [@media(prefers-color-scheme:dark)]:fill-indigo-50 [@media(prefers-color-scheme:dark)]:stroke-indigo-500 [@media(prefers-color-scheme:dark)]:group-hover:fill-indigo-50 [@media(prefers-color-scheme:dark)]:group-hover:stroke-indigo-600"/> className="h-6 w-6 fill-zinc-100 stroke-zinc-500 transition group-hover:fill-zinc-200 group-hover:stroke-zinc-700 dark:hidden [@media(prefers-color-scheme:dark)]:fill-indigo-50 [@media(prefers-color-scheme:dark)]:stroke-indigo-500 [@media(prefers-color-scheme:dark)]:group-hover:fill-indigo-50 [@media(prefers-color-scheme:dark)]:group-hover:stroke-indigo-600"/>