added projects preview images

components/mdx/ProjectPreviewGrid.tsx

@@ -1,3 +1,7 @@
+'use client';
+
+import { useState } from 'react';
+
 type PreviewItem = {
     title: string;
     image: string;
@@ -7,26 +11,26 @@ type props = {
     items?: PreviewItem[];
 };
 
+function PreviewImage({ title, image }: PreviewItem) {
+    const [failed, setFailed] = useState(false);
+
+    if (failed) return null;
+
+    return (
+        <img
+            src={image}
+            alt={title}
+            className="w-full h-full object-cover rounded-xl"
+            onError={() => setFailed(true)}
+        />
+    );
+}
+
 export function ProjectPreviewGrid({ items = [] }: props) {
     return (
         <div className={`grid gap-4 ${items.length > 1 ? 'lg:grid-cols-2' : ''}`}>
             {items.map((item) => (
-                <div
+                <PreviewImage key={item.title} title={item.title} image={item.image} />
-                    key={item.title}
-                    className="rounded-xl overflow-hidden bg-brand-brown/5 border border-brand-brown/8"
-                >
-                    {item.image ? (
-                        <img
-                            src={item.image}
-                            alt={item.title}
-                            className="w-full h-full object-cover"
-                        />
-                    ) : (
-                        <div className="min-h-[220px] flex items-center justify-center text-brand-brown/30 font-sans text-sm">
-                            {item.title}
-                        </div>
-                    )}
-                </div>
             ))}
         </div>
     );