updated note preview component

src/components/note/preview/image.tsx

@@ -0,0 +1,23 @@
+import Image from 'next/image';
+import { memo } from 'react';
+
+export const ImagePreview = memo(function ImagePreview({ data }: { data: any }) {
+  return (
+    <div className="relative mt-2 flex flex-col overflow-hidden">
+      {data.map((image: string, index: number) => (
+        <div key={index} className={`relative h-full w-full rounded-lg ${index == 1 ? 'mt-2' : ''}`}>
+          <Image
+            placeholder="blur"
+            blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
+            src={image}
+            alt={image}
+            width="0"
+            height="0"
+            sizes="100vw"
+            className="h-auto w-full rounded-lg border border-zinc-800 object-cover"
+          />
+        </div>
+      ))}
+    </div>
+  );
+});