feat(projects): update showcase and support dark thumbnails

src/components/ProjectThumbnail.tsx

@@ -0,0 +1,45 @@
+'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);
+      }}
+    />
+  );
+};