pronounss/frontend/components/Card.tsx

28 lines
750 B
TypeScript

import React, { ReactNode } from "react";
export type Props = {
children?: ReactNode | undefined;
title: string;
draggable?: boolean;
footer?: ReactNode | undefined;
};
export default function Card({ title, draggable, children, footer }: Props) {
return (
<div className="relative bg-slate-100 dark:bg-slate-700 rounded-md shadow">
<h1
className={`text-2xl p-2 border-b border-zinc-200 dark:border-slate-800${
draggable && " handle hover:cursor-grab"
}`}
>
{title}
</h1>
<div className="flex flex-col p-2">{children}</div>
{footer && (
<div className="border-t border-zinc-200 dark:border-slate-800">
{footer}
</div>
)}
</div>
);
}