Card

1"use client";
2 
3import "./card.css";
4import type React from "react";
5import { cn } from "tailwind-variants";
6 
7import { CardContext, useCardContext } from "./card.context";
8import { cardVariants, type CardVariants } from "./card.variants";
9 
10export type CardProps = CardVariants & React.ComponentProps<"div">;
11 
12export const CardRoot = ({ children, className, variant, ...props }: CardProps) => {
13  const slots = cardVariants({ variant });
14 
15  return (
16    <CardContext.Provider value={{ slots }}>
17      <div className={cn(slots.root(), className)} {...props}>
18        {children}
19      </div>
20    </CardContext.Provider>
21  );
22};
23 
24export type CardHeaderProps = React.ComponentProps<"div">;
25 
26export const CardHeader = ({ className, ...props }: CardHeaderProps) => {
27  const { slots } = useCardContext();
28  return <div className={cn(slots.header(), className)} {...props} />;
29};
30 
31export type CardTitleProps = React.ComponentProps<"h3">;
32 
33export const CardTitle = ({ className, ...props }: CardTitleProps) => {
34  const { slots } = useCardContext();
35  return <h3 className={cn(slots.title(), className)} {...props} />;
36};
37 
38export type CardDescriptionProps = React.ComponentProps<"p">;
39 
40export const CardDescription = ({ className, ...props }: CardDescriptionProps) => {
41  const { slots } = useCardContext();
42  return <p className={cn(slots.description(), className)} {...props} />;
43};
44 
45export type CardContentProps = React.ComponentProps<"div">;
46 
47export const CardContent = ({ className, ...props }: CardContentProps) => {
48  const { slots } = useCardContext();
49  return <div className={cn(slots.content(), className)} {...props} />;
50};
51 
52export type CardFooterProps = React.ComponentProps<"div">;
53 
54export const CardFooter = ({ className, ...props }: CardFooterProps) => {
55  const { slots } = useCardContext();
56  return <div className={cn(slots.footer(), className)} {...props} />;
57};