46 lines
937 B
TypeScript
46 lines
937 B
TypeScript
import Image from "next/image"
|
|
import { cn } from "cn"
|
|
|
|
export function ImagePreview() {
|
|
return (
|
|
<div className="mt-8 flex flex-col overflow-hidden md:hidden">
|
|
<ImagePreviewItem name="sera-01" />
|
|
<ImagePreviewItem name="sera-03" />
|
|
<ImagePreviewItem name="sera-02" />
|
|
<ImagePreviewItem name="sera-06" />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function ImagePreviewItem({
|
|
name,
|
|
className,
|
|
}: {
|
|
name: string
|
|
className?: string
|
|
}) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"theme-taupe overflow-hidden bg-muted px-4 py-2 first:pt-4 last:pb-4",
|
|
className
|
|
)}
|
|
>
|
|
<Image
|
|
src={`/images/${name}-light.png`}
|
|
alt={name}
|
|
width={1440}
|
|
height={900}
|
|
className="dark:hidden"
|
|
/>
|
|
<Image
|
|
src={`/images/${name}-dark.png`}
|
|
alt={name}
|
|
width={1440}
|
|
height={900}
|
|
className="hidden dark:block"
|
|
/>
|
|
</div>
|
|
)
|
|
}
|