ActionCard.tsx29 lines · main

1	import type { ReactNode } from 'react'
2	import { Card } from 'ui'
3
4	export const ActionCard = (card: {
5	icon: ReactNode
6	title: string
7	description: string
8	bgColor: string
9	onClick?: () => void
10	}) => {
11	return (
12	<Card
13	className="grow bg-surface-100 p-3 transition-colors hover:bg-surface-200 border hover:border-default cursor-pointer"
14	onClick={card.onClick}
15	>
16	<div className={`relative flex items-start gap-3`}>
17	<div
18	className={`rounded-full ${card.bgColor} w-8 h-8 flex items-center justify-center shrink-0`}
19	>
20	{card.icon}
21	</div>
22	<div className="flex flex-col gap-0">
23	<h3 className="text-sm text-foreground mb-0">{card.title}</h3>
24	<p className="text-xs text-foreground-light">{card.description}</p>
25	</div>
26	</div>
27	</Card>
28	)
29	}