action-card

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4import "./action-card.css"
5 
6function ActionCard({
7  className,
8  title,
9  description,
10  icon,
11  logo,
12  action,
13  label,
14  ...props
15}: React.ComponentProps<"div"> & {
16  title?: string
17  description?: string
18  icon?: React.ReactNode
19  logo?: React.ReactNode
20  action?: React.ReactNode
21  label?: string
22}) {
23  return (
24    <div
25      data-slot="action-card"
26      className={cn("action-card-base", className)}
27      {...props}
28    >
29      <div className="flex flex-1 items-center gap-[var(--layout-gap-lg)] min-w-0">
30        {logo && (
31          <div className="action-card-logo shrink-0">{logo}</div>
32        )}
33        {!logo && icon && (
34          <div className="action-card-icon shrink-0">{icon}</div>
35        )}
36        {(title || description) && (
37          <div className="flex flex-1 flex-col gap-[var(--layout-gap-xs)] min-w-0 text-content-note">
38            {title && (
39              <p className="font-accent [color:var(--text-base-bolder)]">
40                {title}
41              </p>
42            )}
43            {description && (
44              <p className="[color:var(--text-base-moderate)]">
45                {description}
46              </p>
47            )}
48          </div>
49        )}
50      </div>
51      {action && <div className="shrink-0">{action}</div>}
52      {!action && label && (
53        <p className="action-card-label shrink-0 text-content-note">
54          {label}
55        </p>
56      )}
57    </div>
58  )
59}
60 
61export { ActionCard }