A customizable card component to visualize your content. 📝
I can not find what to write here.. so imagine I wrote some good stuff.
Copyimport { cn } from "@/lib/utils"; import { HTMLAttributes } from "react"; import { Text } from "../Text"; interface ICardProps extends HTMLAttributes<HTMLDivElement> { className?: string; } const Card = ({ className, ...props }: ICardProps) => { return ( <div className={cn( "inline-block border-2 border-black shadow-md cursor-pointer transition-all hover:shadow-xs", className )} {...props} /> ); }; const CardHeader = ({ className, ...props }: ICardProps) => { return ( <div className={cn("flex flex-col justify-start p-4", className)} {...props} /> ); }; const CardTitle = ({ className, ...props }: ICardProps) => { return <Text as="h3" className={cn("mb-2", className)} {...props} />; }; const CardDescription = ({ className, ...props }: ICardProps) => ( <p className={cn("text-muted", className)} {...props} /> ); const CardContent = ({ className, ...props }: ICardProps) => { return <div className={cn("p-4", className)} {...props} />; }; const CardComponent = Object.assign(Card, { Header: CardHeader, Title: CardTitle, Description: CardDescription, Content: CardContent, }); export { CardComponent as Card };
import { cn } from "@/lib/utils"; import { HTMLAttributes } from "react"; import { Text } from "../Text"; interface ICardProps extends HTMLAttributes<HTMLDivElement> { className?: string; } const Card = ({ className, ...props }: ICardProps) => { return ( <div className={cn( "inline-block border-2 border-black shadow-md cursor-pointer transition-all hover:shadow-xs", className )} {...props} /> ); }; const CardHeader = ({ className, ...props }: ICardProps) => { return ( <div className={cn("flex flex-col justify-start p-4", className)} {...props} /> ); }; const CardTitle = ({ className, ...props }: ICardProps) => { return <Text as="h3" className={cn("mb-2", className)} {...props} />; }; const CardDescription = ({ className, ...props }: ICardProps) => ( <p className={cn("text-muted", className)} {...props} /> ); const CardContent = ({ className, ...props }: ICardProps) => { return <div className={cn("p-4", className)} {...props} />; }; const CardComponent = Object.assign(Card, { Header: CardHeader, Title: CardTitle, Description: CardDescription, Content: CardContent, }); export { CardComponent as Card };
$29.90
Last Updated: 20 Oct, 2024