openstatus.dev
Openstatus
www.openstatus.dev
1import * as React from "react";
2
3import { cn } from "../lib/utils";
4
5const Card = React.forwardRef<
6 HTMLDivElement,
7 React.HTMLAttributes<HTMLDivElement>
8>(({ className, ...props }, ref) => (
9 <div
10 ref={ref}
11 className={cn(
12 "bg-card text-card-foreground rounded-xl border shadow-sm",
13 className,
14 )}
15 {...props}
16 />
17));
18Card.displayName = "Card";
19
20const CardHeader = React.forwardRef<
21 HTMLDivElement,
22 React.HTMLAttributes<HTMLDivElement>
23>(({ className, ...props }, ref) => (
24 <div
25 ref={ref}
26 className={cn("flex flex-col space-y-1.5 p-6", className)}
27 {...props}
28 />
29));
30CardHeader.displayName = "CardHeader";
31
32const CardTitle = React.forwardRef<
33 HTMLParagraphElement,
34 React.HTMLAttributes<HTMLHeadingElement>
35>(({ className, ...props }, ref) => (
36 <h3
37 ref={ref}
38 className={cn("font-semibold leading-none tracking-tight", className)}
39 {...props}
40 />
41));
42CardTitle.displayName = "CardTitle";
43
44const CardDescription = React.forwardRef<
45 HTMLParagraphElement,
46 React.HTMLAttributes<HTMLParagraphElement>
47>(({ className, ...props }, ref) => (
48 <p
49 ref={ref}
50 className={cn("text-muted-foreground text-sm", className)}
51 {...props}
52 />
53));
54CardDescription.displayName = "CardDescription";
55
56const CardContent = React.forwardRef<
57 HTMLDivElement,
58 React.HTMLAttributes<HTMLDivElement>
59>(({ className, ...props }, ref) => (
60 <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61));
62CardContent.displayName = "CardContent";
63
64const CardFooter = React.forwardRef<
65 HTMLDivElement,
66 React.HTMLAttributes<HTMLDivElement>
67>(({ className, ...props }, ref) => (
68 <div
69 ref={ref}
70 className={cn(" flex items-center p-6 pt-0", className)}
71 {...props}
72 />
73));
74CardFooter.displayName = "CardFooter";
75
76export {
77 Card,
78 CardHeader,
79 CardFooter,
80 CardTitle,
81 CardDescription,
82 CardContent,
83};