r-freeman/portfolio
1
0
Fork 0
mirror of https://github.com/r-freeman/portfolio.git synced 2024-11-22 18:15:41 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Extracted nav link component and updated footer styling

Browse Source
This commit is contained in:
r-freeman 2023-02-20 20:45:10 +00:00
parent f2ff678735
commit c3b645321f
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
components/Footer.tsx
View File

@ -1,20 +1,10 @@
import Link from 'next/link'
import React, {ReactNode} from 'react'
import React from 'react'
import {OuterContainer, InnerContainer} from './Container'
import {NavLink} from '@/components/ui/Navigation'
import {SpotifyPlayer} from './ui/SpotifyPlayer'
import {SocialLink} from '@/components/ui/SocialLink'
import {GitHubIcon, LinkedInIcon, TwitterIcon} from '@/components/icons/SocialIcons'
function NavLink({href, children}: { href: string, children: ReactNode }) {
return (
<Link
href={href}
className="transition hover:text-indigo-500 dark:hover:text-indigo-400"
>
{children}
</Link>
)
}
export function Footer() {
return (
@ -24,7 +14,8 @@ export function Footer() {
<InnerContainer>
<SpotifyPlayer/>
<div className="flex flex-col items-center justify-between gap-6 mt-12">
<div className="flex gap-6 text-sm font-medium text-zinc-800 dark:text-zinc-200">
<div
className="flex flex-wrap justify-center gap-6 text-sm font-medium text-zinc-800 dark:text-zinc-200">
<NavLink href="/about">About</NavLink>
<NavLink href="/dashboard">Dashboard</NavLink>
<NavLink href="/writing">Writing</NavLink>

13
components/ui/Navigation.tsx
View File

@ -1,4 +1,4 @@
import {Fragment} from 'react'
import React, {Fragment, ReactNode} from 'react'
import {usePathname} from 'next/navigation'
import {Popover, Transition} from '@headlessui/react'
import clsx from 'clsx'
@ -113,3 +113,14 @@ export function DesktopNavigation(props: Props) {
)
}
export function NavLink({href, children}: { href: string, children: ReactNode }) {
return (
<Link
href={href}
className="transition hover:text-indigo-500 dark:hover:text-indigo-400"
>
{children}
</Link>
)
}