upload images to storage instead of DB and add image high quaiilty view

public/src/components/common/ImagePreview.tsx

@@ -0,0 +1,66 @@
+import { useEffect } from 'react';
+import { createPortal } from 'react-dom';
+
+interface ImagePreviewProps {
+  imageUrl: string;
+  onClose: () => void;
+}
+
+export function ImagePreview({ imageUrl, onClose }: ImagePreviewProps) {
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleEscape);
+    // Prevent body scroll when modal is open
+    document.body.style.overflow = 'hidden';
+
+    return () => {
+      document.removeEventListener('keydown', handleEscape);
+      document.body.style.overflow = 'unset';
+    };
+  }, [onClose]);
+
+  return createPortal(
+    <div
+      className="fixed inset-0 bg-black/80 flex items-center justify-center p-4 animate-fadeIn"
+      style={{ zIndex: 10001 }}
+      onClick={onClose}
+    >
+      <div className="relative max-w-7xl max-h-[90vh] w-full h-full flex items-center justify-center">
+        {/* Close button */}
+        <button
+          onClick={onClose}
+          className="absolute top-4 right-4 bg-white/10 hover:bg-white/20 text-white rounded-full w-10 h-10 flex items-center justify-center transition-colors backdrop-blur-sm"
+          aria-label="Close"
+        >
+          <svg
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            <line x1="18" y1="6" x2="6" y2="18" />
+            <line x1="6" y1="6" x2="18" y2="18" />
+          </svg>
+        </button>
+
+        {/* Image */}
+        <img
+          src={imageUrl}
+          alt="Preview"
+          className="max-w-full max-h-full object-contain rounded-lg shadow-2xl"
+          onClick={(e) => e.stopPropagation()}
+        />
+      </div>
+    </div>,
+    document.body
+  );
+}