personal website
nekomimi.pet
1import * as React from "react";
2
3import { cn } from "@/lib/utils";
4
5function Card({ className, ...props }: React.ComponentProps<"div">) {
6 return (
7 <div
8 data-slot="card"
9 className={cn("glass glass-hover text-card-foreground flex flex-col gap-6 rounded-xl py-6", className)}
10 {...props}
11 />
12 );
13}
14
15function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
16 return (
17 <div
18 data-slot="card-header"
19 className={cn(
20 "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
21 className,
22 )}
23 {...props}
24 />
25 );
26}
27
28function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
29 return <div data-slot="card-title" className={cn("leading-none font-semibold", className)} {...props} />;
30}
31
32function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
33 return <div data-slot="card-description" className={cn("text-muted-foreground text-sm", className)} {...props} />;
34}
35
36function CardAction({ className, ...props }: React.ComponentProps<"div">) {
37 return (
38 <div
39 data-slot="card-action"
40 className={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
41 {...props}
42 />
43 );
44}
45
46function CardContent({ className, ...props }: React.ComponentProps<"div">) {
47 return <div data-slot="card-content" className={cn("px-6", className)} {...props} />;
48}
49
50function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
51 return (
52 <div data-slot="card-footer" className={cn("flex items-center px-6 [.border-t]:pt-6", className)} {...props} />
53 );
54}
55
56export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };