openstatus.dev
Openstatus
www.openstatus.dev
1import type * 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(
10 "flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm",
11 className,
12 )}
13 {...props}
14 />
15 );
16}
17
18function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 return (
20 <div
21 data-slot="card-header"
22 className={cn(
23 "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24 className,
25 )}
26 {...props}
27 />
28 );
29}
30
31function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32 return (
33 <div
34 data-slot="card-title"
35 className={cn("font-semibold leading-none", className)}
36 {...props}
37 />
38 );
39}
40
41function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42 return (
43 <div
44 data-slot="card-description"
45 className={cn("text-muted-foreground text-sm", className)}
46 {...props}
47 />
48 );
49}
50
51function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52 return (
53 <div
54 data-slot="card-action"
55 className={cn(
56 "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57 className,
58 )}
59 {...props}
60 />
61 );
62}
63
64function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65 return (
66 <div
67 data-slot="card-content"
68 className={cn("px-6", className)}
69 {...props}
70 />
71 );
72}
73
74function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75 return (
76 <div
77 data-slot="card-footer"
78 className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79 {...props}
80 />
81 );
82}
83
84export {
85 Card,
86 CardHeader,
87 CardFooter,
88 CardTitle,
89 CardAction,
90 CardDescription,
91 CardContent,
92};