29 lines
745 B
TypeScript
29 lines
745 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="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="p-2 border-t border-zinc-200 dark:border-slate-800">
|
||
|
|
{footer}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|