// @TODO: turn this into a more generic component that has the same Props API as MUI https://mui.com/material-ui/react-card/ import Link from "next/link"; import type { ReactNode } from "react"; import React from "react"; import classNames from "@calcom/lib/classNames"; import { FiArrowRight } from "@calcom/ui/components/icon"; import { Button } from "../button"; export type BaseCardProps = { image?: string; icon?: ReactNode; variant: keyof typeof cardTypeByVariant; 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; }; // @TODO: use CVA const cardTypeByVariant = { basic: { image: "w-10 h-auto", card: "p-5", title: "text-base mt-4", description: "text-sm leading-[18px] text-gray-500 font-normal", }, ProfileCard: { image: "w-9 h-auto rounded-full mb-4s", card: "w-80 p-4 hover:bg-gray-100", title: "text-base", description: "text-sm leading-[18px] text-gray-500 font-normal", }, SidebarCard: { image: "w-9 h-auto rounded-full mb-4s", card: "w-full p-3 border border-gray-200", title: "text-sm font-cal", description: "text-xs text-gray-600 line-clamp-2", }, }; export function Card({ image, title, icon, description, variant, actionButton, containerProps, imageProps, mediaLink, thumbnailUrl, learnMore, }: BaseCardProps) { 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} )}
)}
); } export default Card;