calendrier-avent/components/custom/chart.tsx

31 lines
940 B
TypeScript

"use client"
import {Santa} from "@components/custom/santa";
interface ChartProps {
data: {
name: string
total: number
}[]
}
export function Chart({...props}: ChartProps) {
return (
<div className={"text-[#F0F0F0]"}>
<div className={"flex flex-row justify-between w-full items-end"}>
{props.data.map((item, index) => (
<Santa height={item.total} key={index}/>
))}
</div>
<div className={"flex flex-row justify-between w-full items-end mt-2"}>
{props.data.map((item, index) => (
<div className={"w-[100px] h-fit flex flex-col items-center"} key={index}>
<div className={"h-[14px] w-[3pt] bg-white"}/>
<span className={""}>{item.name}</span>
</div>
))}
</div>
</div>
)
}