// @TODO: turn this into a more generic component that has the same Props API as MUI https://mui.com/material-ui/react-card/ import type { VariantProps } from "class-variance-authority"; import { cva } from "class-variance-authority"; import Link from "next/link"; import type { ReactNode } from "react"; import React from "react"; import classNames from "@calcom/lib/classNames"; import { ArrowRight } from "@calcom/ui/components/icon"; import { Button } from "../button"; const cvaCardTypeByVariant = cva("", { // Variants won't have any style by default. Style will only be applied if the variants are combined. // So, style is defined in compoundVariants. variants: { variant: { basic: "", ProfileCard: "", SidebarCard: "", }, structure: { image: "", card: "", title: "", description: "", }, }, compoundVariants: [ // Style for Basic Variants types { variant: "basic", structure: "image", className: "w-10 h-auto", }, { variant: "basic", structure: "card", className: "p-5", }, { variant: "basic", structure: "title", className: "text-base mt-4", }, { variant: "basic", structure: "description", className: "text-sm leading-[18px] text-subtle font-normal", }, // Style for ProfileCard Variant Types { variant: "ProfileCard", structure: "image", className: "w-9 h-auto rounded-full mb-4s", }, { variant: "ProfileCard", structure: "card", className: "w-80 p-4 hover:bg-subtle", }, { variant: "ProfileCard", structure: "title", className: "text-base", }, { variant: "ProfileCard", structure: "description", className: "text-sm leading-[18px] text-subtle font-normal", }, // Style for SidebarCard Variant Types { variant: "SidebarCard", structure: "image", className: "w-9 h-auto rounded-full mb-4s", }, { variant: "SidebarCard", structure: "card", className: "w-full p-3 border border-subtle", }, { variant: "SidebarCard", structure: "title", className: "text-sm font-cal", }, { variant: "SidebarCard", structure: "description", className: "text-xs text-default line-clamp-2", }, ], }); type CVACardType = Required, "variant">>; export interface BaseCardProps extends CVACardType { image?: string; icon?: ReactNode; imageProps?: JSX.IntrinsicElements["img"]; title: string; description: ReactNode; containerProps?: JSX.IntrinsicElements["div"]; actionButton?: { href?: string; child: ReactNode; onClick?: (event: React.MouseEvent) => void; }; learnMore?: { href: string; text: string; }; mediaLink?: string; thumbnailUrl?: string; structure?: string; } export function Card({ image, title, icon, description, variant, actionButton, containerProps, imageProps, mediaLink, thumbnailUrl, learnMore, }: BaseCardProps) { const LinkComponent = learnMore && learnMore.href.startsWith("https") ? "a" : Link; return (
{icon && icon} {image && ( {imageProps?.alt} )}
{title}
{description && (

{description}

)}
{variant === "SidebarCard" && (
play feature video )} {/* TODO: this should be CardActions https://mui.com/material-ui/api/card-actions/ */}
{variant === "basic" && ( )}
{variant === "SidebarCard" && (
{learnMore && ( {learnMore.text} )} {actionButton?.child && ( )}
)}
); } export default Card;