Warcraft Card

1import * as React from "react"
2 
3import { cn } from "@/lib/utils"
4 
5import "@/components/ui/warcraftcn/styles/warcraft.css";
6 
7function Card({
8  className,
9  ...props
10}: React.ComponentProps<"div">) {
11  return (
12    <div
13      data-slot="card"
14      className={cn(
15        "fantasy text-card-foreground gap-4 overflow-hidden rounded-xl text-sm has-data-[slot=card-footer]:pb-0 has-[>img:first-child]:pt-0 data-[size=sm]:gap-3 data-[size=sm]:has-data-[slot=card-footer]:pb-0 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl group/card flex flex-col border-solid wc-card-border [border-image-repeat:stretch]",
16        "border-24 px-6 [border-image-slice:24_fill]",
17        "data-[size=sm]:border-16 data-[size=sm]:p-4 data-[size=sm]:py-3 data-[size=sm]:[border-image-slice:16_fill]",
18        className
19      )}
20      {...props}
21    />
22  )
23}
24 
25function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
26  return (
27    <div
28      data-slot="card-header"
29      className={cn(
30        "gap-1 pt-14 rounded-t-xl px-4 group-data-[size=sm]/card:px-3 group/card-header @container/card-header grid auto-rows-min items-start has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]",
31        className
32      )}
33      {...props}
34    />
35  )
36}
37 
38function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
39  return (
40    <div
41      data-slot="card-title"
42      className={cn("text-base leading-snug font-medium group-data-[size=sm]/card:text-sm", className)}
43      {...props}
44    />
45  )
46}
47 
48function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
49  return (
50    <div
51      data-slot="card-description"
52      className={cn("text-muted-foreground text-sm", className)}
53      {...props}
54    />
55  )
56}
57 
58function CardAction({ className, ...props }: React.ComponentProps<"div">) {
59  return (
60    <div
61      data-slot="card-action"
62      className={cn(
63        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
64        className
65      )}
66      {...props}
67    />
68  )
69}
70 
71function CardContent({ className, ...props }: React.ComponentProps<"div">) {
72  return (
73    <div
74      data-slot="card-content"
75      className={cn("px-4 group-data-[size=sm]/card:px-3", className)}
76      {...props}
77    />
78  )
79}
80 
81function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
82  return (
83    <div
84      data-slot="card-footer"
85// … truncated