Card

1import { Text, View } from "react-native";
2 
3import { cn } from "@/lib/utils";
4 
5// Components
6export const Card = ({
7  className,
8  ...props
9}: React.ComponentProps<typeof View>) => {
10  return (
11    <View
12      className={cn(
13        "flex flex-col gap-6 rounded-2xl bg-card py-5 text-card-foreground",
14        className
15      )}
16      data-slot="card"
17      {...props}
18    />
19  );
20};
21 
22export const CardHeader = ({
23  className,
24  ...props
25}: React.ComponentProps<typeof View>) => {
26  return (
27    <View
28      className={cn("flex items-start gap-1 px-4", className)}
29      data-slot="card-header"
30      {...props}
31    />
32  );
33};
34 
35export const CardTitle = ({
36  className,
37  ...props
38}: React.ComponentProps<typeof Text>) => {
39  return (
40    <Text
41      className={cn(
42        "font-semibold text-foreground text-xl leading-none",
43        className
44      )}
45      data-slot="card-title"
46      {...props}
47    />
48  );
49};
50 
51export const CardDescription = ({
52  className,
53  ...props
54}: React.ComponentProps<typeof Text>) => {
55  return (
56    <Text
57      className={cn("text-muted-foreground text-sm", className)}
58      data-slot="card-description"
59      {...props}
60    />
61  );
62};
63 
64export const CardContent = ({
65  className,
66  ...props
67}: React.ComponentProps<typeof View>) => {
68  return (
69    <View
70      className={cn("px-4", className)}
71      data-slot="card-content"
72      {...props}
73    />
74  );
75};
76 
77export const CardFooter = ({
78  className,
79  ...props
80}: React.ComponentProps<typeof View>) => {
81  return (
82    <View
83      className={cn("flex items-center px-4", className)}
84      data-slot="card-footer"
85      {...props}
86    />
87  );
88};