quel syntaxe html si je souhaite rajouter dans le <div className='left-part-sub-string'> 3 boutons type checbkox (mode selectionné ou non selectionné) étant : 20 Juillet, 21 Juillet, 22 Juillet en sachant que ces boutton devront permettre une sauvegarde dans les cookies react : import { motion } from 'framer-motion';
import { useState } from 'react';

type Props = {
  id: number;
  title: string;
  price: number|string;
  nbTicket: number;
};


export default function TicketCard(props: Props) {
  const [isOpen, setIsOpen] = useState(false);
  const [tickets, setTickets] = useState(props.nbTicket);
  const [rotation, setRotation] = useState(0);
  const handleTicketChange = (newTickets: number, event: React.MouseEvent) => {
    event.stopPropagation();
    setTickets(newTickets);
  };

  const contentVariants = {
    closed: {
      opacity: 0,
      height: 0,
      overflow: 'hidden',
      transition: {
        duration: 0.2,
        ease: 'easeInOut',
        when: 'afterChildren',
      },
    },
    open: {
      opacity: 1,
      height: typeof props.price === 'string' ? 140 : 80,
      transition: {
        duration: 0.2,
        ease: 'easeInOut',
        when: 'beforeChildren',
      }
    },
  };
  
  const cardVariants = {
    hidden: { opacity: 0, y: 50 },
    visible: {
      opacity: 1,
      y: 0,
      transition: {
        type: 'spring',
        stiffness: 120,
      },
    },
  };

  return (
    <motion.div
      className="ticket-card"
      layout
      initial="hidden"
      animate="visible"
      variants={cardVariants}
      onClick={() => {
        setIsOpen(!isOpen);
        setRotation(rotation === 0 ? 90 : 0);
      }}
    >
      <div className="content">
        <div className='left-part'>
          <h4>{props.title}</h4>
          <p>Les tickets ne sont pas remboursables.</p>
          <p>Dernière entrée à 11H.</p>
        </div>
        <div className='right-part'>
          <p>{props.price}€</p>
          <motion.div className="svg-container" animate={{ rotate: rotation }}>
            <svg xmlns="http://www.w3.org/2000/svg" width="13" height="20" viewBox="0 0 13 20" fill="none">
              <path d="M2 18L10 10L2 2" stroke="#4E4E4E" strokeWidth="4" />
            </svg>
          </motion.div>
        </div>
      </div>
      
      <motion.div
  className={`sub-menu ${typeof props.price === 'string' ? 'large' : ''}`}
  variants={contentVariants}
  initial="closed"
  animate={isOpen ? "open" : "closed"}
  exit="closed"
>
  {typeof props.price === 'string' ? (
    <div className='left-part-sub-string'>
    <div className ="rect">
      <img src="images/billet_pass1j.png" alt="Billet pass 1 jour" />
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" viewBox="0 0 22 21" fill="none">
      <path d="M22 9.03848H14.6966L19.8599 4.10947L17.6953 2.04109L12.532 6.97007V0H9.46799V6.97007L4.30475 2.04109L2.13807 4.10947L7.30131 9.03848H0V11.9615H7.30131L2.13807 16.8906L4.30475 18.9589L9.46799 14.0299V21H12.532V14.0299L17.6953 18.9589L19.8599 16.8906L14.6966 11.9615H22V9.03848Z" fill="#FFD600"/>
    </svg>
    <p>x{tickets} Article(s) sélectionné(s)</p>
  </div>
  ) : (
    <div className='left-part-sub'>
      <div className ="rect">
        <img src="images/billet_pass1j.png" alt="Billet pass 1 jour" />
      </div>
      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" viewBox="0 0 22 21" fill="none">
        <path d="M22 9.03848H14.6966L19.8599 4.10947L17.6953 2.04109L12.532 6.97007V0H9.46799V6.97007L4.30475 2.04109L2.13807 4.10947L7.30131 9.03848H0V11.9615H7.30131L2.13807 16.8906L4.30475 18.9589L9.46799 14.0299V21H12.532V14.0299L17.6953 18.9589L19.8599 16.8906L14.6966 11.9615H22V9.03848Z" fill="#FFD600"/>
      </svg>
      <p>x{tickets} Article(s) sélectionné(s)</p>
    </div>
  )}
  <div className="ticket-control">
    <button onClick={(event) => handleTicketChange(Math.max(tickets - 1, 0), event)}>-</button>
    <span>{tickets}</span>
    <button className='sommeButton' onClick={(event) => handleTicketChange(tickets + 1, event)}>+</button>
  </div>
</motion.div>
    </motion.div>
  );
}import Cookies from 'js-cookie';

// Définition des types pour les données que vous souhaitez stocker dans les cookies
interface UserData {
  username: string;
  email: string;
  // ... autres champs
}

// Fonction pour définir un cookie
export const setCookie = (key: string, value: any, options?: Cookies.CookieAttributes) => {
  Cookies.set(key, JSON.stringify(value), options);
};

// Fonction pour récupérer un cookie
export const getCookie = (key: string): any | null => {
  const cookie = Cookies.get(key);
  return cookie ? JSON.parse(cookie) : null;
};

// Fonction pour supprimer un cookie
export const removeCookie = (key: string) => {
  Cookies.remove(key);
};

type userData= {
    pseudoUser: string;
    emailUser: string;
    idUser: number;
}

export const setUserCookie = (user: userData) => {
    setCookie("Connected", user, {expires: 7});
}

export const isConnected = ():boolean => {
    const user = getCookie("Connected");
    if (user){
        return true;
    }
    return false;
}

export const getUserCookie = ():userData => {
    const user = getCookie("Connected");
    return user;
}

export const removeUserCookie = () => {
    removeCookie("Connected");
}