67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
import { ReactNode } 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: string;
|
|
containerProps?: JSX.IntrinsicElements["div"];
|
|
actionButton?: {
|
|
href: string;
|
|
child: ReactNode;
|
|
};
|
|
};
|
|
|
|
const cardTypeByVariant = {
|
|
AppStore: {
|
|
image: "w-10 h-auto",
|
|
card: "p-5 w-64",
|
|
},
|
|
ProfileCard: {
|
|
image: "w-9 h-auto rounded-full mb-4s",
|
|
card: "w-80 p-4 hover:bg-gray-100",
|
|
actionButton: "",
|
|
},
|
|
};
|
|
|
|
export function Card({
|
|
image,
|
|
title,
|
|
description,
|
|
variant,
|
|
actionButton,
|
|
containerProps,
|
|
imageProps,
|
|
}: BaseCardProps) {
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
containerProps?.className,
|
|
cardTypeByVariant[variant].card,
|
|
"border-1 rounded-md border-gray-200 bg-white"
|
|
)}
|
|
{...containerProps}>
|
|
<img
|
|
src={image}
|
|
// Stops eslint complaining - not smart enough to realise it comes from ...imageProps
|
|
alt={imageProps?.alt}
|
|
className={classNames(imageProps?.className, cardTypeByVariant[variant].image, "mb-4")}
|
|
{...imageProps}
|
|
/>
|
|
<span className="text-base font-bold leading-5 text-gray-900 ">{title}</span>
|
|
<p className="pt-1 text-sm font-normal leading-[18px] text-gray-500">{description}</p>
|
|
{variant === "AppStore" && (
|
|
<Button color="secondary" href={actionButton?.href} size="lg" className="mt-10 w-full">
|
|
{/* Force it to be centered as this usecase of a button is off - doesnt meet normal sizes */}
|
|
<div className="mx-auto">{actionButton?.child}</div>
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|