Mini Card

1import * as React from "react"
2import { cva, type VariantProps } from "class-variance-authority"
3import { cn } from "@/lib/utils"
4 
5const miniCardVariants = cva(
6  "relative overflow-hidden flex flex-col justify-end",
7  {
8    variants: {
9      variant: {
10        primary: "bg-treasury-primary",
11        "primary-dark": "bg-treasury-primary-dark",
12        secondary: "bg-treasury-secondary",
13        "secondary-dark": "bg-treasury-secondary-dark",
14        "base-dark": "bg-treasury-base-dark",
15        "base-darkest": "bg-treasury-base-darkest",
16      },
17      size: {
18        default: "p-4 min-h-[120px]",
19        sm: "p-3 min-h-[80px]",
20      },
21    },
22    defaultVariants: {
23      variant: "primary",
24      size: "default",
25    },
26  }
27)
28 
29export interface MiniCardProps
30  extends React.HTMLAttributes<HTMLDivElement>,
31    VariantProps<typeof miniCardVariants> {
32  icon?: React.ReactNode
33  title: string
34  href?: string
35}
36 
37function MiniCard({
38  className,
39  variant,
40  size,
41  icon,
42  title,
43  href,
44  ...props
45}: MiniCardProps) {
46  const content = (
47    <>
48      {/* Treasury Seal Background */}
49      <div
50        className="absolute inset-0 opacity-20 pointer-events-none"
51        style={{
52          backgroundImage: "url('/images/treasury-seal.png')",
53          backgroundPosition: "bottom right",
54          backgroundRepeat: "no-repeat",
55          backgroundSize: "auto 120%",
56        }}
57        aria-hidden="true"
58      />
59 
60      {/* Content */}
61      <div className="relative z-10 flex flex-col gap-2">
62        {icon && (
63          <div className="text-treasury-paper [&_svg]:size-8 [&_svg]:stroke-[1.5]">
64            {icon}
65          </div>
66        )}
67        <h3 className="text-treasury-paper text-lg font-semibold leading-tight">
68          {title}
69        </h3>
70      </div>
71    </>
72  )
73 
74  const cardClasses = cn(miniCardVariants({ variant, size, className }))
75 
76  if (href) {
77    return (
78      <a
79        href={href}
80        className={cn(
81          cardClasses,
82          "transition-all hover:brightness-110 focus:outline-none focus:ring-2 focus:ring-treasury-paper focus:ring-offset-2"
83        )}
84        {...(props as React.AnchorHTMLAttributes<HTMLAnchorElement>)}
85      >
86        {content}
87      </a>
88    )
89  }
90 
91  return (
92    <div className={cardClasses} {...props}>
93      {content}
94    </div>
95  )
96}
97 
98export { MiniCard, miniCardVariants }