46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import { useState, type FC } from 'react';
|
|
import { useTheme } from '@/context/ThemeContext';
|
|
|
|
interface ProjectThumbnailProps {
|
|
image: string;
|
|
title: string;
|
|
priority?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
const getDarkImagePath = (image: string) =>
|
|
image.replace(/(\.[^./]+)$/, '-dark$1');
|
|
|
|
export const ProjectThumbnail: FC<ProjectThumbnailProps> = ({
|
|
image,
|
|
title,
|
|
priority = false,
|
|
className,
|
|
}) => {
|
|
const { theme } = useTheme();
|
|
const darkImage = getDarkImagePath(image);
|
|
const [unavailableDarkImage, setUnavailableDarkImage] = useState<string | null>(
|
|
null,
|
|
);
|
|
const useDarkImage = theme === 'dark' && unavailableDarkImage !== darkImage;
|
|
|
|
return (
|
|
<Image
|
|
key={useDarkImage ? darkImage : image}
|
|
src={useDarkImage ? darkImage : image}
|
|
alt={title}
|
|
fill
|
|
sizes="(max-width: 650px) 100vw, (max-width: 1100px) 100vw, 360px"
|
|
priority={priority}
|
|
draggable={false}
|
|
className={className}
|
|
onError={() => {
|
|
if (useDarkImage) setUnavailableDarkImage(darkImage);
|
|
}}
|
|
/>
|
|
);
|
|
};
|