40 lines
1.4 KiB
TypeScript
40 lines
1.4 KiB
TypeScript
import { cn } from '@/utils/cn'
|
|
import Image from 'next/image'
|
|
|
|
type ImageWrapperProps = {
|
|
src: string
|
|
alt?: string
|
|
isListing?: boolean
|
|
}
|
|
|
|
export function ImageWrapper({ src, alt, isListing }: ImageWrapperProps) {
|
|
return (
|
|
<figure className={cn('flex flex-col items-center gap-1 mb-4', isListing ? 'h-60' : 'w-full')}>
|
|
<div className="border border-border rounded-xl w-full overflow-hidden flex-1">
|
|
<div
|
|
className="flex items-center gap-2 px-2 h-6 border-b border-border w-full bg-fg/10"
|
|
aria-hidden="true"
|
|
>
|
|
<div className="space-x-1">
|
|
<span className="w-2 h-2 bg-border rounded-full inline-block"></span>
|
|
<span className="w-2 h-2 bg-border rounded-full inline-block"></span>
|
|
<span className="w-2 h-2 bg-border rounded-full inline-block"></span>
|
|
</div>
|
|
<span className="text-xs text-fg-dim font-mono">~/{src}</span>
|
|
</div>
|
|
<Image
|
|
src={`/${src}`}
|
|
alt={alt ?? ''}
|
|
width={isListing ? 400 : 800}
|
|
height={isListing ? 240 : 400}
|
|
quality={isListing ? 75 : 100}
|
|
priority={true}
|
|
className="w-auto mx-auto object-cover h-full"
|
|
/>
|
|
</div>
|
|
{!isListing && alt && (
|
|
<figcaption className="block text-xs text-fg-dim font-mono text-center">{alt}</figcaption>
|
|
)}
|
|
</figure>
|
|
)
|
|
}
|