React and ShadcnUI how to make a whole card clickable to change a radioGroup
I wanted to create a card that is clickable anywhere to change the radio group how can I go on about making such a component? Any recomendations?
I created this so far
export function CarCardIndividual({ className, ...props }: CardProps) {
return (
<Card className={cn("w-[380px]", className)} {...props}>
<CardHeader>
<CardTitle>{props.cardTitle}</CardTitle>
<CardDescription>You have 3 unread messages.</CardDescription>
</CardHeader>
<CardContent className="grid gap-4">
<div>
{notifications.map((notification, index) => (
<div
key={index}
className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
>
<span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
<div className="space-y-1">
<p className="text-sm font-medium leading-none">
{notification.title}
</p>
</div>
</div>
))}
<Image
src="https://www.shutterstock.com/image-photo/yellow-taxi-car-roof-sign-260nw-1918057085.jpg"
alt="individual car"
width={380}
height={200}
/>
</div>
</CardContent>
<CardFooter className="items-center justify-center">
<RadioGroupItem value={props.value} id={props.id} />
</CardFooter>
</Card>
);
}
export function CarCardIndividual({ className, ...props }: CardProps) {
return (
<Card className={cn("w-[380px]", className)} {...props}>
<CardHeader>
<CardTitle>{props.cardTitle}</CardTitle>
<CardDescription>You have 3 unread messages.</CardDescription>
</CardHeader>
<CardContent className="grid gap-4">
<div>
{notifications.map((notification, index) => (
<div
key={index}
className="mb-4 grid grid-cols-[25px_1fr] items-start pb-4 last:mb-0 last:pb-0"
>
<span className="flex h-2 w-2 translate-y-1 rounded-full bg-sky-500" />
<div className="space-y-1">
<p className="text-sm font-medium leading-none">
{notification.title}
</p>
</div>
</div>
))}
<Image
src="https://www.shutterstock.com/image-photo/yellow-taxi-car-roof-sign-260nw-1918057085.jpg"
alt="individual car"
width={380}
height={200}
/>
</div>
</CardContent>
<CardFooter className="items-center justify-center">
<RadioGroupItem value={props.value} id={props.id} />
</CardFooter>
</Card>
);
}
1 Reply
const CarCards: FC = () => {
return (
<div className="flex flex-col">
<RadioGroup defaultValue="taxi-one" className="flex flex-row">
<div className="flex items-center space-x-2">
<CarCardIndividual
cardTitle="Small Taxi"
value="taxi-one"
id="taxi-one"
/>
</div>
<div className="flex items-center space-x-2">
<CarCardIndividual
cardTitle="Medium Taxi"
value="taxi-two"
id="taxi-two"
/>
</div>
</RadioGroup>
</div>
);
};
export default CarCards;
const CarCards: FC = () => {
return (
<div className="flex flex-col">
<RadioGroup defaultValue="taxi-one" className="flex flex-row">
<div className="flex items-center space-x-2">
<CarCardIndividual
cardTitle="Small Taxi"
value="taxi-one"
id="taxi-one"
/>
</div>
<div className="flex items-center space-x-2">
<CarCardIndividual
cardTitle="Medium Taxi"
value="taxi-two"
id="taxi-two"
/>
</div>
</RadioGroup>
</div>
);
};
export default CarCards;