Card updates

package-lock.json

@@ -14805,6 +14805,7 @@
       "version": "0.453.0",
       "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
       "integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
+      "license": "ISC",
       "peerDependencies": {
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }

src/components/Cart.js

@@ -1,7 +1,8 @@
-import React, { useState } from 'react';
-import { useSelector, useDispatch } from 'react-redux';
-import { removePoster } from '../services/action';
-import DeleteIcon from '@material-ui/icons/Delete';
+import React, { useState } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { removePoster } from "../services/action";
+import DeleteIcon from "@material-ui/icons/Delete";
+import { Camera } from "lucide-react";
 
 const apiUrl = process.env.REACT_APP_API_URL;
 
@@ -14,7 +15,7 @@ const Cart = () => {
     );
   });
 
-  const [downloadFormat, setDownloadFormat] = useState('zip');
+  const [downloadFormat, setDownloadFormat] = useState("zip");
 
   const handleRemovePoster = (movieId, posterId) => {
     dispatch(removePoster(movieId, posterId));
@@ -23,9 +24,9 @@ const Cart = () => {
   const handleDownload = async () => {
     try {
       const response = await fetch(`${apiUrl}/api/download-posters`, {
-        method: 'POST',
+        method: "POST",
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
         body: JSON.stringify({
           posters: selectedPosters,
@@ -33,32 +34,47 @@ const Cart = () => {
         }),
       });
 
-      if (!response.ok) throw new Error('Download failed');
+      if (!response.ok) throw new Error("Download failed");
 
-      const contentType = response.headers.get('content-type');
-      if (contentType && contentType.includes('application/zip')) {
+      const contentType = response.headers.get("content-type");
+      if (contentType && contentType.includes("application/zip")) {
         const blob = await response.blob();
         const url = window.URL.createObjectURL(blob);
-        const link = document.createElement('a');
+        const link = document.createElement("a");
         link.href = url;
-        link.download = 'posters.zip';
+        link.download = "posters.zip";
         document.body.appendChild(link);
         link.click();
         link.remove();
         window.URL.revokeObjectURL(url);
       } else {
-        throw new Error('Invalid response format');
+        throw new Error("Invalid response format");
       }
     } catch (error) {
-      console.error('Failed to download posters:', error);
+      console.error("Failed to download posters:", error);
     }
   };
 
+  const totalSlots = 4;
+  const posterSlots = [...Array(totalSlots)].map((_, index) => {
+    if (index < selectedPosters.length) {
+      return selectedPosters[index];
+    }
+    return null;
+  });
+
   return (
     <div className="cart-container">
       <div className="poster-grid">
-          {selectedPosters.map((poster) => (
-              <div key={`${poster.movieId}-${poster.posterId}`} className="poster-card">
+        {posterSlots.map((poster, index) => (
+          <div
+            key={
+              poster ? `${poster.movieId}-${poster.posterId}` : `empty-${index}`
+            }
+            className="poster-card"
+          >
+            {poster ? (
+              <>
                 <img
                   src={`https://image.tmdb.org/t/p/w500${poster.posterId}`}
                   alt="Movie poster"
@@ -67,11 +83,20 @@ const Cart = () => {
                 <div className="delete-overlay">
                   <button
                     className="delete-button"
-                      onClick={() => handleRemovePoster(poster.movieId, poster.posterId)}
+                    onClick={() =>
+                      handleRemovePoster(poster.movieId, poster.posterId)
+                    }
                   >
                     <DeleteIcon />
                   </button>
                 </div>
+              </>
+            ) : (
+              <div className="empty-poster">
+                <Camera size={48} />
+                <p>Emplacement disponible</p>
+              </div>
+            )}
           </div>
         ))}
       </div>

src/styles/scss/_cart.scss

@@ -54,6 +54,30 @@
         }
       }
     }
+
+    .empty-poster {
+      width: 100%;
+      height: 100%;
+      background-color: #f5f6fa10;
+      border: 2px #95a5a6;
+      border-radius: 8px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      color: #7f8c8d;
+
+      svg {
+        margin-bottom: 1rem;
+        color: #95a5a6;
+      }
+
+      p {
+        font-size: 0.875rem;
+        text-align: center;
+        padding: 0 1rem;
+      }
+    }
   }
 
   .action-panel {