Tapage/components/modeCard.tsx

export default function ModeCard({ mode, selected, onChange }: any){
  const Icon = mode.icon
  return <>
    <div onClick={onChange} className={`w-24 h-24 rounded-md flex p-4 flex-col items-center ${selected ? "bg-primary" : "bg-zinc-300"}`}>
      <Icon className="w-12 h-12" />
      <p>{mode.name}</p>
    </div>
  </>
}