39 lines
872 B
TypeScript
39 lines
872 B
TypeScript
|
import Image from "next/image";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
|
||
|
|
const FALLBACK = "/dummy/news-2.jpg";
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
src?: string | null;
|
||
|
|
alt: string;
|
||
|
|
className?: string;
|
||
|
|
sizes?: string;
|
||
|
|
};
|
||
|
|
|
||
|
|
/** Use inside a `relative` container with fixed height; covers area with `object-cover`. */
|
||
|
|
export default function ArticleThumbnail({ src, alt, className, sizes }: Props) {
|
||
|
|
const url =
|
||
|
|
src && String(src).trim().length > 0 ? String(src).trim() : FALLBACK;
|
||
|
|
const isLocal = url.startsWith("/");
|
||
|
|
|
||
|
|
if (isLocal) {
|
||
|
|
return (
|
||
|
|
<Image
|
||
|
|
src={url}
|
||
|
|
alt={alt}
|
||
|
|
fill
|
||
|
|
className={cn("object-cover", className)}
|
||
|
|
sizes={sizes ?? "(max-width: 768px) 100vw, 25vw"}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<img
|
||
|
|
src={url}
|
||
|
|
alt={alt}
|
||
|
|
className={cn("absolute inset-0 h-full w-full object-cover", className)}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|