langfuse

1
import * as React from "react";
2

3
import { cn } from "@/src/utils/tailwind";
4

5
const 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
));
18
Card.displayName = "Card";
19

20
const 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
));
30
CardHeader.displayName = "CardHeader";
31

32
const 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
));
45
CardTitle.displayName = "CardTitle";
46

47
const 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
));
57
CardDescription.displayName = "CardDescription";
58

59
const 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
));
65
CardContent.displayName = "CardContent";
66

67
const 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
));
77
CardFooter.displayName = "CardFooter";
78

79
export {
80
  Card,
81
  CardHeader,
82
  CardFooter,
83
  CardTitle,
84
  CardDescription,
85
  CardContent,
86
};
87