mirror of
https://github.com/r-freeman/portfolio.git
synced 2024-11-11 18:45:41 +00:00
Extracted avatar component
This commit is contained in:
parent
8cbff5dffa
commit
a9d7f5c7ce
@ -1,4 +1,3 @@
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
import {usePathname} from 'next/navigation'
|
||||
import {Fragment, useEffect, useRef} from 'react'
|
||||
@ -6,11 +5,11 @@ import {Popover, Transition} from '@headlessui/react'
|
||||
import clsx from 'clsx'
|
||||
import {Container} from './Container'
|
||||
import {MobileNavItem} from './ui/MobileNavItem'
|
||||
import {Avatar, AvatarContainer} from './ui/Avatar'
|
||||
import {CloseIcon} from './icons/CloseIcon'
|
||||
import {ChevronDownIcon} from './icons/ChevronDownIcon'
|
||||
import {MoonIcon} from './icons/MoonIcon'
|
||||
import {SunIcon} from './icons/SunIcon'
|
||||
import avatar from '@/public/static/images/avatar.jpg'
|
||||
import type {Props} from 'types'
|
||||
|
||||
function MobileNavigation(props: Props) {
|
||||
@ -152,40 +151,6 @@ function clamp(num: number, a: number, b: number) {
|
||||
return Math.min(Math.max(num, min), max)
|
||||
}
|
||||
|
||||
function AvatarContainer({className, ...props}: { style?: Object } & Props) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
className,
|
||||
'h-10 w-10 rounded-full bg-white/90 p-0.5 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:ring-white/10'
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function Avatar({large = false, className, ...props}: { large?: boolean, style?: Object } & Props) {
|
||||
return (
|
||||
<Link
|
||||
href="/"
|
||||
aria-label="Home"
|
||||
className={clsx(className, 'pointer-events-auto')}
|
||||
{...props}
|
||||
>
|
||||
<Image
|
||||
src={avatar}
|
||||
alt=""
|
||||
sizes={large ? '4rem' : '2.25rem'}
|
||||
className={clsx(
|
||||
'rounded-full bg-zinc-100 object-cover dark:bg-zinc-800',
|
||||
large ? 'h-16 w-16' : 'h-9 w-9'
|
||||
)}
|
||||
placeholder="blur"
|
||||
/>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
||||
export function Header() {
|
||||
const isHomePage = usePathname() === '/'
|
||||
|
||||
|
39
components/ui/Avatar.tsx
Normal file
39
components/ui/Avatar.tsx
Normal file
@ -0,0 +1,39 @@
|
||||
import {Props} from '@/types'
|
||||
import clsx from 'clsx'
|
||||
import Link from 'next/link'
|
||||
import Image from 'next/image'
|
||||
import avatar from '@/public/static/images/avatar.jpg'
|
||||
|
||||
export function AvatarContainer({className, ...props}: { style?: Object } & Props) {
|
||||
return (
|
||||
<div
|
||||
className={clsx(
|
||||
className,
|
||||
'h-10 w-10 rounded-full bg-white/90 p-0.5 shadow-lg shadow-zinc-800/5 ring-1 ring-zinc-900/5 backdrop-blur dark:bg-zinc-800/90 dark:ring-white/10'
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export function Avatar({large = false, className, ...props}: { large?: boolean, style?: Object } & Props) {
|
||||
return (
|
||||
<Link
|
||||
href="/"
|
||||
aria-label="Home"
|
||||
className={clsx(className, 'pointer-events-auto')}
|
||||
{...props}
|
||||
>
|
||||
<Image
|
||||
src={avatar}
|
||||
alt=""
|
||||
sizes={large ? '4rem' : '2.25rem'}
|
||||
className={clsx(
|
||||
'rounded-full bg-zinc-100 object-cover dark:bg-zinc-800',
|
||||
large ? 'h-16 w-16' : 'h-9 w-9'
|
||||
)}
|
||||
placeholder="blur"
|
||||
/>
|
||||
</Link>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue
Block a user