Card

1import * as React from "react";
2import { View, ViewProps } from "react-native";
3import { cn } from "@/lib/utils";
4 
5interface CardProps extends ViewProps {
6  children: React.ReactNode;
7  className?: string;
8}
9 
10function Card({ className, children, ...props }: CardProps) {
11  return (
12    <View
13      className={cn(
14        "bg-card rounded-2xl border border-border p-4 shadow-sm",
15        className
16      )}
17      {...props}
18    >
19      {children}
20    </View>
21  );
22}
23 
24function CardHeader({ className, children, ...props }: CardProps) {
25  return (
26    <View
27      className={cn(
28        "flex-row justify-between items-start gap-4 mb-4",
29        className
30      )}
31      {...props}
32    >
33      {children}
34    </View>
35  );
36}
37 
38function CardTitle({ className, children, ...props }: CardProps) {
39  return (
40    <View className={cn("flex-shrink", className)} {...props}>
41      {children}
42    </View>
43  );
44}
45 
46function CardDescription({ className, children, ...props }: CardProps) {
47  return (
48    <View className={cn("text-muted-foreground", className)} {...props}>
49      {children}
50    </View>
51  );
52}
53 
54function CardContent({ className, children, ...props }: CardProps) {
55  return (
56    <View className={cn("", className)} {...props}>
57      {children}
58    </View>
59  );
60}
61 
62function CardFooter({ className, children, ...props }: CardProps) {
63  return (
64    <View
65      className={cn("mt-4 flex-row items-center justify-end gap-4", className)}
66      {...props}
67    >
68      {children}
69    </View>
70  );
71}
72 
73export {
74  Card,
75  CardHeader,
76  CardFooter,
77  CardTitle,
78  CardDescription,
79  CardContent,
80};