import Link from "next/link"; import { ReactNode } from "react"; import React from "react"; import classNames from "@calcom/lib/classNames"; import Button from "./Button"; export type BaseCardProps = { image?: string; 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; }; const cardTypeByVariant = { AppStore: { image: "w-10 h-auto", card: "p-5 w-64", title: "text-base", 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, description, variant, actionButton, containerProps, imageProps, mediaLink, thumbnailUrl, learnMore, }: BaseCardProps) { return (
{image && ( {imageProps?.alt} )}
{title}
{description && (

{description}

)} {variant === "SidebarCard" && (
play feature video )} {variant === "AppStore" && ( )} {variant === "SidebarCard" && (
{learnMore && ( {learnMore.text} )}
)}
); } export default Card;