56 lines
1.2 KiB
TypeScript
56 lines
1.2 KiB
TypeScript
/**
|
|
* <img> avec srcset/sizes pré-rempli sur les variantes Karbé.
|
|
* Drop-in remplacement pour les balises `<img src=… />` côté front.
|
|
*/
|
|
|
|
import { buildSrcSet } from "@/lib/image-variants";
|
|
|
|
type Props = {
|
|
src: string;
|
|
alt: string;
|
|
/** Indication CSS pour le browser. Ex: "(min-width: 768px) 800px, 100vw" */
|
|
sizes?: string;
|
|
className?: string;
|
|
loading?: "lazy" | "eager";
|
|
fetchPriority?: "high" | "low" | "auto";
|
|
width?: number;
|
|
height?: number;
|
|
decoding?: "async" | "sync" | "auto";
|
|
draggable?: boolean;
|
|
style?: React.CSSProperties;
|
|
onClick?: () => void;
|
|
};
|
|
|
|
export function ResponsiveImage({
|
|
src,
|
|
alt,
|
|
sizes = "(min-width: 768px) 800px, 100vw",
|
|
className,
|
|
loading = "lazy",
|
|
fetchPriority = "auto",
|
|
width,
|
|
height,
|
|
decoding = "async",
|
|
draggable,
|
|
style,
|
|
onClick,
|
|
}: Props) {
|
|
return (
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|
<img
|
|
src={src}
|
|
srcSet={buildSrcSet(src)}
|
|
sizes={sizes}
|
|
alt={alt}
|
|
loading={loading}
|
|
fetchPriority={fetchPriority}
|
|
decoding={decoding}
|
|
width={width}
|
|
height={height}
|
|
draggable={draggable}
|
|
style={style}
|
|
className={className}
|
|
onClick={onClick}
|
|
/>
|
|
);
|
|
}
|