callout-card

1import * as React from "react"
2import { X } from "lucide-react"
3 
4import { cn } from "@/lib/utils"
5import "./callout-card.css"
6 
7function CalloutCard({
8  className,
9  icon,
10  title,
11  description,
12  action,
13  onDismiss,
14  ...props
15}: React.ComponentProps<"div"> & {
16  icon?: React.ReactNode
17  title?: string
18  description?: string
19  action?: React.ReactNode
20  onDismiss?: () => void
21}) {
22  return (
23    <div
24      data-slot="callout-card"
25      className={cn("callout-card-base", className)}
26      {...props}
27    >
28      <div className="flex flex-col gap-[var(--layout-gap-sm)] w-full">
29        {(icon || title || onDismiss) && (
30          <div className="flex items-start justify-between w-full">
31            <div className="flex gap-[var(--layout-gap-sm)] items-center">
32              {icon && (
33                <span
34                  className="callout-card-icon shrink-0"
35                  aria-hidden="true"
36                >
37                  {icon}
38                </span>
39              )}
40              {title && (
41                <p className="callout-card-title text-content-note font-accent">
42                  {title}
43                </p>
44              )}
45            </div>
46            {onDismiss && (
47              <button
48                type="button"
49                onClick={onDismiss}
50                className="callout-card-dismiss shrink-0 cursor-pointer inline-flex items-center justify-center size-[var(--layout-size-xs)]"
51                aria-label="Dismiss"
52              >
53                <X className="size-[var(--layout-size-2xs)]" />
54              </button>
55            )}
56          </div>
57        )}
58        {description && (
59          <p className="callout-card-description text-content-note">
60            {description}
61          </p>
62        )}
63      </div>
64      {action && <div className="w-full">{action}</div>}
65    </div>
66  )
67}
68 
69export { CalloutCard }