WIP

src/components/generic/Card.tsx

@@ -1,21 +1,56 @@
 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, children }: CardProps): JSX.Element => {
+export const Card = ({
+  className,
+  title,
+  actions,
+  draggable,
+  border,
+  children,
+}: CardProps): JSX.Element => {
   return (
-    <m.div
-      className={`flex select-none rounded-md bg-white p-4 shadow-md dark:bg-primaryDark ${className}`}
-      initial={{ opacity: 0 }}
-      animate={{ opacity: 1 }}
-      exit={{ opacity: 0 }}
-    >
-      {children}
-    </m.div>
+    <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 }}
+        >
+          {children}
+        </m.div>
+      </div>
+    </Draggable>
   );
 };