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.
57 lines
1.6 KiB
57 lines
1.6 KiB
import type React from 'react';
|
|
|
|
import { m } from 'framer-motion';
|
|
import Draggable from 'react-draggable';
|
|
|
|
export interface CardProps {
|
|
className?: string;
|
|
title?: string;
|
|
actions?: React.ReactNode;
|
|
children: React.ReactNode;
|
|
border?: boolean;
|
|
draggable?: boolean;
|
|
}
|
|
|
|
export const Card = ({
|
|
className,
|
|
title,
|
|
actions,
|
|
draggable,
|
|
border,
|
|
children,
|
|
}: CardProps): JSX.Element => {
|
|
return (
|
|
<Draggable handle=".handle" disabled={!draggable}>
|
|
<div
|
|
className={`flex h-full w-full flex-col rounded-md shadow-md ${
|
|
border ? 'border border-gray-300 dark:border-gray-600' : ''
|
|
} ${className ?? ''}`}
|
|
>
|
|
{(title || actions) && (
|
|
<div
|
|
className={`w-full select-none justify-between rounded-t-md border-b border-gray-300 bg-gray-200 p-2 px-2 text-lg font-medium dark:border-gray-600 dark:bg-primaryDark dark:text-white ${
|
|
draggable ? 'cursor-move' : ''
|
|
}`}
|
|
>
|
|
<div className="handle flex h-8 justify-between">
|
|
<div className="my-auto ml-2 truncate">{title}</div>
|
|
{actions}
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
<m.div
|
|
className={`flex flex-grow select-none flex-col gap-4 p-4 ${
|
|
title || actions ? 'rounded-b-md backdrop-blur-xl' : 'rounded-md'
|
|
} ${draggable ? '' : 'bg-white dark:bg-primaryDark'}`}
|
|
initial={{ opacity: 0 }}
|
|
animate={{ opacity: 1 }}
|
|
exit={{ opacity: 0 }}
|
|
transition={{ duration: 0.1 }}
|
|
>
|
|
{children}
|
|
</m.div>
|
|
</div>
|
|
</Draggable>
|
|
);
|
|
};
|
|
|