Pixelact Card

1import { type VariantProps, cva } from "class-variance-authority";
2 
3import { cn } from "@/lib/utils";
4 
5import {
6  Card as ShadcnCard,
7  CardAction as ShadcnCardAction,
8  CardContent as ShadcnCardContent,
9  CardDescription as ShadcnCardDescription,
10  CardFooter as ShadcnCardFooter,
11  CardHeader as ShadcnCardHeader,
12  CardTitle as ShadcnCardTitle,
13} from "@/components/ui/card";
14 
15import "@/components/ui/pixelact-ui/styles/styles.css";
16 
17export const cardVariants = cva("", {
18  variants: {
19    font: {
20      normal: "",
21      pixel: "pixel-font",
22    },
23  },
24  defaultVariants: {
25    font: "pixel",
26  },
27});
28 
29export interface CardProps
30  extends React.ComponentProps<"div">,
31    VariantProps<typeof cardVariants> {
32  asChild?: boolean;
33}
34 
35function Card({ ...props }: CardProps) {
36  const { className, font } = props;
37 
38  return (
39    <ShadcnCard
40      {...props}
41      className={cn(
42        "rounded-none border-0 bg-card shadow-(--pixel-box-shadow) box-shadow-margin",
43        cardVariants({ font }),
44        className
45      )}
46    />
47  );
48}
49 
50function CardHeader({ ...props }: CardProps) {
51  const { className } = props;
52 
53  return <ShadcnCardHeader className={cn("", className)} {...props} />;
54}
55 
56function CardTitle({ ...props }: CardProps) {
57  const { className } = props;
58 
59  return (
60    <ShadcnCardTitle
61      className={cn("font-normal text-lg", className)}
62      {...props}
63    />
64  );
65}
66 
67function CardDescription({ ...props }: CardProps) {
68  const { className } = props;
69 
70  return <ShadcnCardDescription className={cn(className)} {...props} />;
71}
72 
73function CardAction({ ...props }: CardProps) {
74  const { className } = props;
75 
76  return <ShadcnCardAction className={cn(className)} {...props} />;
77}
78 
79function CardContent({ ...props }: CardProps) {
80  const { className } = props;
81 
82  return <ShadcnCardContent className={cn(className)} {...props} />;
83}
84 
85function CardFooter({ ...props }: CardProps) {
86  const { className } = props;
87 
88  return (
89    <ShadcnCardFooter
90      data-slot="card-footer"
91      className={cn(className)}
92      {...props}
93    />
94  );
95}
96 
97export {
98  Card,
99  CardHeader,
100  CardFooter,
101  CardTitle,
102  CardAction,
103  CardDescription,
104  CardContent,
105};