je veux avoir pour les tickets de forfait 2 jours un affichage des checboxes qui définissent les jours choisit dans l'item du panier, il faudrait par exemple qu'un forfait 2 jours pour le 20 juillet et le 21 juillet et un autre forfait 2 jours pour le 21 juillet et 22 juillet soit séparées dans le panier, afin que ce soit plus logique d'ajouter des billets avec les memes jours selectionnées : import React, { useContext } from 'react';
import { CartContext } from '../../../../App.tsx'; 
import { setCookie } from '../../../../cookies/CookiesLib.tsx';


type Props = {
    id: number;
    typeBillet: number,
    title: string,
    price: number,
    quantite: number,
  };

export const ItemPanier: React.FC<Props> = ({ typeBillet, price, quantite, title}) => {
  const { cart, setCart } = useContext(CartContext);

  // Fonction pour enlever un billet du panier
  const removeFromCart = () => {
    const updatedCart = cart.filter((item: { id: number; }) => item.id !== typeBillet);
    setCart(updatedCart);
    setCookie('cart', updatedCart, { expires: 7, sameSite: 'None', secure: true })
  };

  // Fonction pour mettre à jour la quantité d'un billet dans le panier
  const updateQuantity = (newQuantity: number) => {
    const updatedCart = cart.map((item) => {
      if (item.id === typeBillet) {
        return { ...item, quantity: newQuantity };
      }
      return item;
    });
    setCart(updatedCart);
    setCookie('cart', updatedCart, { expires: 7, path: '/' }); // Ajoutez le chemin si nécessaire
  };

  return (
    <div className="item-panier">
        <div className="container-item-panier">
            <div className="container-image">
                <img src="/images/billet.png" alt="billet" />
            </div>
            <div className="informations">
              <div className='partie-texte'>
                <div className="textes">
                    <h4>{title}</h4>
                    <h5>{price}€</h5> 
                </div>
                </div>
                <div className="compteur-quantitee">
                    <span className='ajout-retrait' onClick={() => updateQuantity(Math.max(0, quantite - 1))}>-</span>
                    <input type="number" className='quantite' value={quantite} readOnly />
                    <span className='ajout-retrait' onClick={() => updateQuantity(quantite + 1)}>+</span>
                </div>
            </div>
        </div>   
              <img className='cross' src="/icones/cross.svg" alt="croix" onClick={removeFromCart} />
    </div>
  );
};import React, { useContext } from 'react';
import { CartContext } from '../../../../App.tsx'; // Assurez-vous que le chemin est correct
import { ItemPanier } from './ItemPanier';
import { motion } from 'framer-motion';
import Button from '../../../../components/form/Button';


type Props = {
  isOpen: boolean;
  setIsOpen: (isOpen: boolean) => void;
};

const MenuPanier: React.FC<Props> = ({ isOpen, setIsOpen }) => {
  const { cart } = useContext(CartContext);

  // Calculer le sous-total
  const subtotal = cart.reduce((acc: number, item: { price: number; quantity: number; }) => acc + item.price * item.quantity, 0);

  const menuVariants = {
    hidden: {
      x: '42rem',
      transition: {
        duration: 0.5,
        ease: [1, -0.02, 0, 1]
      }
    },
    visible: {
      x: 0,
      transition: {
        duration: 0.5,
        ease: [1, -0.02, 0, 1]
      }
    },
  };

  return (
    <motion.div
      className="side-menu cart"
      variants={menuVariants}
      initial="hidden"
      animate={isOpen ? "visible" : "hidden"}
    >
      <svg className="cross" onClick={() => setIsOpen(false)} width="36" height="28" viewBox="0 0 36 28" fill="none" xmlns="http://www.w3.org/2000/svg">
  <rect x="6.52539" y="0.321533" width="35.8974" height="3.58974" rx="1.79487" transform="rotate(45 6.52539 0.321533)" fill="#E45A3B"/>
  <rect x="3.87891" y="25.5957" width="35.8974" height="3.58974" rx="1.79487" transform="rotate(-45 3.87891 25.5957)" fill="#E45A3B"/>
</svg>
      <div className="container">
        <h2>Mon panier</h2>
        <section className='le-panier'>
          {cart.length > 0 ? (
            cart.map((item) => (
              <ItemPanier
                key={item.id}
                id={item.id}
                typeBillet={item.id}
                title={item.title}
                price={typeof item.price === 'number' ? item.price : parseInt(item.price, 10)}
                quantite={item.quantity}
              />
            ))
          ) : (
            <p>Panier Vide</p>
          )}
        </section>

        <div className="sous-total">
          <h4>Sous total: </h4>
          <h4>{subtotal.toFixed(2)}€</h4>
        </div>

        <Button text="RESERVER"></Button>
      </div>
    </motion.div>
  );
};

export default MenuPanier;