import { Head, router } from '@inertiajs/react'; import { Store } from 'lucide-react'; import { motion, useReducedMotion } from 'motion/react'; import { update } from '@/actions/App/Http/Controllers/MaquisSelectionController'; import { Card, CardDescription, CardHeader, CardTitle, } from '@/components/ui/card'; const MotionCard = motion.create(Card); type MaquisOption = { id: number; name: string; city: string | null; logo_path: string | null; }; type Props = { maquisList: MaquisOption[]; }; export default function SelectMaquis({ maquisList }: Props) { const shouldReduceMotion = useReducedMotion(); const selectMaquis = (maquisId: number) => { router.post(update().url, { maquis_id: maquisId }); }; return ( <>

{maquisList.map((maquis) => ( selectMaquis(maquis.id)} onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { selectMaquis(maquis.id); } }} whileHover={ shouldReduceMotion ? undefined : { y: -3, boxShadow: '0 8px 20px -8px rgb(0 0 0 / 0.18)', } } whileTap={shouldReduceMotion ? undefined : { y: 0 }} transition={{ duration: 0.2, ease: 'easeOut' }} className="hover:border-primary py-4" >

{maquis.name} {maquis.city && ( {maquis.city} )}

))}

); } SelectMaquis.layout = { title: 'Choisissez un maquis', description: "Sélectionnez l'établissement que vous souhaitez gérer.", };