gitscope
← marzneshin / master / dashboard/src/common/components/ui/card.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/common/components/ui/card.tsx · TypeScript
Blame Raw
 1import * as React from "react"
 2
 3import { cn } from "@marzneshin/common/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            "rounded-lg border bg-card text-card-foreground 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(
39            "text-2xl font-semibold leading-none tracking-tight",
40            className
41        )}
42        {...props}
43    />
44))
45CardTitle.displayName = "CardTitle"
46
47const CardDescription = React.forwardRef<
48    HTMLParagraphElement,
49    React.HTMLAttributes<HTMLParagraphElement>
50>(({ className, ...props }, ref) => (
51    <p
52        ref={ref}
53        className={cn("text-sm text-muted-foreground", className)}
54        {...props}
55    />
56))
57CardDescription.displayName = "CardDescription"
58
59const CardContent = React.forwardRef<
60    HTMLDivElement,
61    React.HTMLAttributes<HTMLDivElement>
62>(({ className, ...props }, ref) => (
63    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
64))
65CardContent.displayName = "CardContent"
66
67const CardFooter = React.forwardRef<
68    HTMLDivElement,
69    React.HTMLAttributes<HTMLDivElement>
70>(({ className, ...props }, ref) => (
71    <div
72        ref={ref}
73        className={cn("flex items-center p-6 pt-0", className)}
74        {...props}
75    />
76))
77CardFooter.displayName = "CardFooter"
78
79export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }