74 lines
1.8 KiB
TypeScript
74 lines
1.8 KiB
TypeScript
import { cn } from "@/lib/utils";
|
|
import { fonts, ImageShapeName, imageShapes } from "@/front/lib/constants";
|
|
import { ImageProps } from "@/types/front";
|
|
import Button from "./Button";
|
|
|
|
type ImageAction = {
|
|
label: string;
|
|
href: string;
|
|
};
|
|
|
|
type ThemeImageProps = {
|
|
shape?: ImageShapeName;
|
|
image: ImageProps;
|
|
size?: string;
|
|
action?: ImageAction;
|
|
};
|
|
|
|
export default function Image({
|
|
shape = imageShapes.ROUNDED,
|
|
image,
|
|
action,
|
|
size = "w-32 h-32",
|
|
}: Readonly<ThemeImageProps>) {
|
|
const customShape =
|
|
shape === imageShapes.SQUARE ? "rounded-none" : "rounded-full";
|
|
const objectFit =
|
|
shape === imageShapes.SQUARE ? "object-contain" : "object-fit";
|
|
const lazyload = image.lazyload ? "lazy" : "eager";
|
|
return (
|
|
<div
|
|
className={cn(
|
|
size,
|
|
customShape,
|
|
"relative z-1 overflow-hidden group flex justify-center items-center",
|
|
)}
|
|
>
|
|
<img
|
|
loading={lazyload}
|
|
className={cn(customShape, objectFit, size)}
|
|
src={image.src}
|
|
alt={image.alt}
|
|
title={image?.title ?? image.alt}
|
|
srcSet={image.src}
|
|
/>
|
|
{action && (
|
|
<>
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0 bg-black opacity-0 transition-opacity duration-300",
|
|
"group-hover:opacity-20",
|
|
)}
|
|
/>
|
|
<div
|
|
className={cn(
|
|
"absolute inset-0 flex items-center justify-center opacity-0 transition-opacity duration-300",
|
|
"group-hover:opacity-100",
|
|
)}
|
|
>
|
|
<Button
|
|
size="xs"
|
|
font={fonts.DELIUS_SWASH}
|
|
isBold={false}
|
|
tabIndex={-1}
|
|
link={{
|
|
label: action.label,
|
|
href: action.href,
|
|
}}
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|