1 files changed, 24 insertions, 0 deletions
diff --git a/frontend/src/components/ImageSideBar.tsx b/frontend/src/components/ImageSideBar.tsx
new file mode 100644
index 0000000..c2ec33f
--- /dev/null
+++ b/frontend/src/components/ImageSideBar.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+
+type ImageSidebarProps = {
+  name: string;
+  previews: string[];
+  files: File[];
+};
+
+const ImageSidebar: React.FC<ImageSidebarProps> = ({ name, previews, files }) => {
+  return (
+    <div className="w-64 flex-shrink-0 overflow-y-auto border-l-2 border-gray-400 bg-blue-100 shadow-xl p-4">
+      <h4 className="font-semibold text-lg text-blue-900 mb-4">{name}</h4>
+      {previews.map((preview, index) => (
+        <div key={index} className="mb-4">
+          <p className="text-sm font-medium text-gray-800">{files[index].name}</p>
+          <img src={preview} alt={files[index].name} style={{ width: '100%', height: 'auto' }} />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ImageSidebar;
+