$69.69

1import React from "react";
2import { cn } from "@/utils/cn";
3
4type CardContainerProps = {
5  className?: string;
6  children: React.ReactNode;
7};
8
9const CardContainer = ({ className, children }: CardContainerProps) => {
10  return <div className={cn("min-h-40 max-w-80", className)}>{children}</div>;
11};
12
13type CardHeaderProps = {
14  children: React.ReactNode;
15  className?: string;
16};
17
18const CardHeader = ({ children, className }: CardHeaderProps) => {
19  return <div className={"card-header" + className}>{children}</div>;
20};
21
22type CardTitleProps = {
23  children: React.ReactNode;
24  className?: string;
25};
26
27const CardTitle = ({ children, className }: CardTitleProps) => {
28  return (
29    <h2 className={cn("mb-2 text-xl font-semibold text-white", className)}>
30      {children}
31    </h2>
32  );
33};
34
35type CardBodyProps = {
36  children: React.ReactNode;
37  className?: string;
38};
39
40const CardBody = ({ children, className }: CardBodyProps) => {
41  return <div className={cn("mb-4 text-gray-400", className)}>{children}</div>;
42};
43
44type CardButtonProps = {
45  children: React.ReactNode;
46  className?: string;
47  onClick?: () => void;
48};
49
50const CardButton = ({ children, className, onClick }: CardButtonProps) => {
51  return (
52    <button
53      onClick={onClick}
54      className={cn(
55        "mb-2 flex items-center justify-between gap-2 rounded-lg bg-[#F65571] px-4 py-2 text-rose-100 hover:bg-rose-500",
56        className
57      )}
58      style={{ opacity: 1 }}
59    >
60      {children}
61    </button>
62  );
63};
64
65type ImageProps = {
66  src: string;
67  alt: string;
68  className?: string;
69};
70
71const CardImage = ({ src, alt, className }: ImageProps) => {
72  //eslint-disable-next-line
73  return <img src={src} alt={alt} className={cn("", className)} />;
74};
75
76// !! Card Icon
77type CardIconProps = {
78  children: React.ReactNode;
79  className?: string;
80};
81
82const CardIcon = ({ children, className }: CardIconProps) => {
83  return <div className={cn("mb-2 text-[#F65571]", className)}>{children}</div>;
84};
85
86type CardLinkProps = {
87  children: React.ReactNode;
88  className?: string;
89  href: string;
90};
91
92const CardLink = ({ children, className, href }: CardLinkProps) => {
93  return (
94    <a
95      className={cn(
96        "mb-2 flex flex-row items-center text-base text-[#F65571] after:text-[#F65571] hover:underline",
97        className
98      )}
99      href={href}
100    >
101      {children}
102    </a>
103  );
104};
105
106type CardFooterProps = {
107  children: React.ReactNode;
108  className?: string;
109};
110
111const CardFooter = ({ children, className }: CardFooterProps) => {
112  return <div className={"card-footer" + className}>{children}</div>;
113};
114
115type CardCustomerProps = {
116  imageSrc: string;
117  name: string;
118  email: string;
119  className?: string;
120};
121
122const CardCustomer = ({
123  imageSrc,
124  name,
125  email,
126  className,
127}: CardCustomerProps) => {
128  return (
129    <div
130      className={cn(
131        "flex items-center justify-between border-b border-gray-700 py-2 last:border-none",
132        className
133      )}
134    >
135      <CardImage
136        src={imageSrc}
137        alt={name}
138        className={cn(
139          "mr-3 h-10 w-10 rounded-full",
140          className && className.includes("image") ? className : ""
141        )}
142      />
143      <div
144        className={cn(
145          "flex-grow",
146          className && className.includes("name") ? className : ""
147        )}
148      >
149        <div
150          className={cn(
151            "font-bold text-white",
152            className && className.includes("name-text") ? className : ""
153          )}
154        >
155          {name}
156        </div>
157        <div
158          className={cn(
159            "text-gray-400",
160            className && className.includes("email-text") ? className : ""
161          )}
162        >
163          {email}
164        </div>
165      </div>
166      <div
167        className={cn(
168          "font-bold text-[#F65571]",
169          className && className.includes("amount") ? className : ""
170        )}
171      >
172        $367
173      </div>
174    </div>
175  );
176};
177
178type CardRatingProps = {
179  children: React.ReactNode;
180  className?: string;
181};
182
183const CardRating = ({ children, className }: CardRatingProps) => {
184  return (
185    <h3
186      className={cn(
187        "ml-4 flex h-5 w-9 items-center justify-center rounded-full border border-transparent bg-rose-100 px-2 text-center text-base text-[#F65571]",
188        className
189      )}
190    >
191      {children}
192    </h3>
193  );
194};
195
196export {
197  CardContainer,
198  CardHeader,
199  CardTitle,
200  CardBody,
201  CardButton,
202  CardImage,
203  CardIcon,
204  CardLink,
205  CardFooter,
206  CardCustomer,
207  CardRating,
208};
209
210type CardProps = {
211  children: React.ReactNode;
212  className?: string;
213};
214
215export const Card = ({ children, className }: CardProps) => {
216  return <CardContainer className={className}>{children}</CardContainer>;
217};