spotlight-card

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4import "./spotlight-card.css"
5 
6function SpotlightCard({
7  className,
8  title,
9  description,
10  image,
11  ...props
12}: React.ComponentProps<"div"> & {
13  title?: string
14  description?: string
15  image?: React.ReactNode
16}) {
17  return (
18    <div
19      data-slot="spotlight-card"
20      className={cn("spotlight-card-base", className)}
21      {...props}
22    >
23      <div className="spotlight-card-image">
24        {image ?? <div className="spotlight-card-image-fallback" />}
25      </div>
26      <div className="flex flex-col gap-[var(--layout-gap-xs)] p-[var(--layout-padding-lg)]">
27        {title && (
28          <p className="text-content-note font-accent [color:var(--text-base-strong)]">
29            {title}
30          </p>
31        )}
32        {description && (
33          <p className="text-content-caption [color:var(--text-base-moderate)]">
34            {description}
35          </p>
36        )}
37      </div>
38    </div>
39  )
40}
41 
42export { SpotlightCard }