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

Extracted avatar component

Browse Source
This commit is contained in:
r-freeman 2023-02-15 20:28:09 +00:00
parent 8cbff5dffa
commit a9d7f5c7ce
2 changed files with 40 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/Header.tsx
View File

@ -1,4 +1,3 @@
import Image from 'next/image'
import Link from 'next/link' import Link from 'next/link'
import {usePathname} from 'next/navigation' import {usePathname} from 'next/navigation'
import {Fragment, useEffect, useRef} from 'react' import {Fragment, useEffect, useRef} from 'react'
@ -6,11 +5,11 @@ import {Popover, Transition} from '@headlessui/react'
import clsx from 'clsx' import clsx from 'clsx'
import {Container} from './Container' import {Container} from './Container'
import {MobileNavItem} from './ui/MobileNavItem' import {MobileNavItem} from './ui/MobileNavItem'
import {Avatar, AvatarContainer} from './ui/Avatar'
import {CloseIcon} from './icons/CloseIcon' import {CloseIcon} from './icons/CloseIcon'
import {ChevronDownIcon} from './icons/ChevronDownIcon' import {ChevronDownIcon} from './icons/ChevronDownIcon'
import {MoonIcon} from './icons/MoonIcon' import {MoonIcon} from './icons/MoonIcon'
import {SunIcon} from './icons/SunIcon' import {SunIcon} from './icons/SunIcon'
import avatar from '@/public/static/images/avatar.jpg'
import type {Props} from 'types' import type {Props} from 'types'
function MobileNavigation(props: Props) { function MobileNavigation(props: Props) {
@ -152,40 +151,6 @@ function clamp(num: number, a: number, b: number) {
return Math.min(Math.max(num, min), max) 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() { export function Header() {
const isHomePage = usePathname() === '/' const isHomePage = usePathname() === '/'

39
components/ui/Avatar.tsx Normal file
View 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>
)
}