modal design refining nk

package.json

@@ -26,7 +26,8 @@
     "react-router-dom": "^6.28.0",
     "sonner": "^1.7.1",
     "tailwind-merge": "^2.5.4",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "zustand": "^5.0.3"
   },
   "devDependencies": {
     "@eslint/js": "^9.13.0",

src/components/ThumbnailPageComponents/ImageComparisonSlider.tsx

@@ -43,7 +43,7 @@ const ImageComparisonSlider: React.FC<ImageSliderProps> = ({
       ref={containerRef}
       style={{
         position: "relative",
-        width: "600px",
+        width: "100%",
         height: "400px",
         overflow: "hidden",
         borderRadius: "12px",

src/components/ThumbnailPageComponents/Modal.tsx

@@ -0,0 +1,111 @@
+// import React, { useState } from "react";
+
+
+// const Modal: React.FC = () => {
+//     const [newModelName, setNewModelName] = useState("");
+
+
+//     return (
+//         <>
+
+//         <div
+//             style={{
+//               background: "#fff",
+//               padding: "20px",
+//               borderRadius: "12px",
+//               width: "400px",
+//               boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.2)",
+//               textAlign: "center",
+//             }}
+//           >
+//             <h2 style={{ marginBottom: "15px" }}>Create a New Model</h2>
+//             <input
+//               type="text"
+//               placeholder="Enter Model Name"
+//               value={newModelName}
+//               onChange={(e) => setNewModelName(e.target.value)}
+//               style={{
+//                 width: "100%",
+//                 padding: "10px",
+//                 marginBottom: "15px",
+//                 borderRadius: "8px",
+//                 border: "1px solid #ccc",
+//               }}
+//             />
+
+//             <div
+//               style={{
+//                 border: "2px dashed #ccc",
+//                 borderRadius: "12px",
+//                 padding: "20px",
+//                 textAlign: "center",
+//                 marginBottom: "15px",
+//               }}
+//             >
+//               <p style={{ fontSize: "1.1rem", fontWeight: "bold" }}>
+//                 Start from a photo
+//               </p>
+//               <label
+//                 htmlFor="file-upload"
+//                 style={{
+//                   display: "inline-block",
+//                   padding: "10px 20px",
+//                   backgroundColor: "rgb(102,51,153)",
+//                   color: "#fff",
+//                   borderRadius: "8px",
+//                   cursor: "pointer",
+//                   margin: "10px 0",
+//                   fontSize: "1rem",
+//                 }}
+//               >
+//                 📤 Browse files
+//               </label>
+//               <input
+//                 id="file-upload"
+//                 type="file"
+//                 multiple
+//                 accept="image/*"
+//                 onChange={handleImageUpload}
+//                 style={{ display: "none" }}
+//               />
+//               <p
+//                 style={{ fontSize: "0.9rem", color: "#666" }}
+//               >{`${uploadedImages.length} file(s) selected`}</p>
+//             </div>
+
+//             <div style={{ display: "flex", justifyContent: "space-between" }}>
+//               <button
+//                 onClick={handleAddModel}
+//                 style={{
+//                   padding: "10px 20px",
+//                   background: "green",
+//                   color: "#fff",
+//                   borderRadius: "8px",
+//                   border: "none",
+//                   cursor: "pointer",
+//                 }}
+//               >
+//                 Create
+//               </button>
+//               <button
+//                 onClick={handleCloseModal}
+//                 style={{
+//                   padding: "10px 20px",
+//                   background: "#f44336",
+//                   color: "#fff",
+//                   borderRadius: "8px",
+//                   border: "none",
+//                   cursor: "pointer",
+//                 }}
+//               >
+//                 Cancel
+//               </button>
+//             </div>
+//           </div>
+
+
+//         </>
+//     );
+// };
+
+// export default Modal;

src/components/ThumbnailPageComponents/Modalcontainer.tsx

@@ -0,0 +1,49 @@
+import React, { useState } from "react";
+import useCounterStore from "../../store/counterstore";
+
+interface ButtonProps {
+  triggerFunction: () => void; // Function passed as a prop
+}
+
+const Modalcontainer: React.FC<ButtonProps> = ({ triggerFunction }) => {
+  const [selectedFilter, setSelectedFilter] = useState<number>(2);
+  const { image_coming_from_BE,  } = useCounterStore(); // ✅ Changed 'counter' to 'count'
+
+  return (
+    <div className="flex items-center gap-2 bg-white p-3 rounded-xl shadow-md w-auto">
+      {image_coming_from_BE &&
+        image_coming_from_BE.map((img, index) => (
+          <div
+            key={index} 
+            onClick={() => setSelectedFilter(index)} 
+            className={`flex flex-col items-center cursor-pointer transition-all rounded-xl p-1 
+              ${
+                selectedFilter === index
+                  ? "border-2 border-purple-500"
+                  : "border border-transparent"
+              }
+              overflow-hidden`}
+          >
+            <img
+              src={img}
+              className="w-14 h-14 rounded-md object-cover"
+              alt={`Uploaded ${index}`}
+            />
+
+
+          </div>
+        ))}
+
+      {/* More Button */}
+      <button
+        onClick={triggerFunction}
+        className="w-auto h-14 flex flex-col items-center justify-center text-gray-700 bg-gray-100 rounded-md hover:bg-gray-200 transition"
+      >
+        <span className="text-lg font-bold">Create new Model</span>
+
+      </button>
+    </div>
+  );
+};
+
+export default Modalcontainer;