gitscope
← marzneshin / v0.3.2 / dashboard/src/components/ui/card.tsx
https://dev.kronoz.win/r/marzneshin.git
dashboard/src/components/ui/card.tsx · TypeScript
Blame Raw
 1import * as React from "react"
 2
 3import { cn } from "@marzneshin/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 }