64 lines
1.7 KiB
TypeScript
64 lines
1.7 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
|
|
export const positions: Record<number, string> = {
|
|
0: '1 er',
|
|
1: '2 ème',
|
|
2: '3 ème'
|
|
};
|
|
|
|
export default function PodiumStep({
|
|
podium,
|
|
group,
|
|
index
|
|
}: {
|
|
podium: any;
|
|
group: any;
|
|
index: number;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-col items-center">
|
|
<motion.div
|
|
custom={index}
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={{
|
|
visible: () => ({
|
|
opacity: 1,
|
|
transition: {
|
|
delay: podium.length - group.place + 0.5,
|
|
duration: 0.75
|
|
}
|
|
}),
|
|
hidden: { opacity: 0 }
|
|
}}
|
|
className="w-16 items-center justify-center text-center"
|
|
>
|
|
<span className="font-semibold text-white">{group.name}</span>
|
|
</motion.div>
|
|
<motion.div
|
|
custom={index}
|
|
initial="hidden"
|
|
animate="visible"
|
|
variants={{
|
|
visible: () => ({
|
|
height: 200 * ((podium.length - group.place) / podium.length),
|
|
opacity: 2,
|
|
transition: {
|
|
delay: podium.length - group.place - 0.5,
|
|
duration: 1.25,
|
|
ease: 'backInOut'
|
|
}
|
|
}),
|
|
hidden: { opacity: 0, height: 0 }
|
|
}}
|
|
className="flex w-16 cursor-pointer place-content-center rounded-t-lg bg-brand shadow-lg hover:bg-opacity-80"
|
|
style={{
|
|
marginBottom: -1,
|
|
filter: `opacity(${0.1 + (podium.length - group.place) / podium.length})`
|
|
}}
|
|
>
|
|
<span className="self-end font-semibold text-white">{positions[group.place]}</span>
|
|
</motion.div>
|
|
</div>
|
|
);
|
|
}
|