ActionCard.tsx41 lines · main

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