You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
45 lines
1.2 KiB
45 lines
1.2 KiB
import React from 'react';
|
|
|
|
type DefaultDivProps = JSX.IntrinsicElements['div'];
|
|
|
|
interface CardProps extends DefaultDivProps {
|
|
title: string;
|
|
description: string | JSX.Element;
|
|
buttons?: JSX.Element;
|
|
lgPlaceholder?: JSX.Element;
|
|
}
|
|
|
|
export const Card = ({
|
|
title,
|
|
description,
|
|
buttons,
|
|
children,
|
|
className,
|
|
lgPlaceholder,
|
|
...props
|
|
}: CardProps): JSX.Element => {
|
|
return (
|
|
<div
|
|
className={`flex flex-col flex-auto dark:text-white border shadow-md select-none dark:bg-primaryDark dark:border-transparent rounded-3xl ${className}`}
|
|
{...props}
|
|
>
|
|
<div className="flex items-center justify-between mx-10 mt-10">
|
|
<div className="flex flex-col">
|
|
<div className="mr-4 text-2xl font-semibold leading-7 tracking-tight text-black md:text-3xl dark:text-white">
|
|
{title}
|
|
</div>
|
|
<div className="font-medium text-gray-400">{description}</div>
|
|
</div>
|
|
{buttons}
|
|
</div>
|
|
<div className="flex">
|
|
<div className={`${lgPlaceholder ? 'w-full xl:w-2/3' : 'w-full'}`}>
|
|
{children}
|
|
</div>
|
|
{lgPlaceholder && (
|
|
<div className="hidden w-1/3 xl:flex">{lgPlaceholder}</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|