2.0 Overhaul start

src/components/form/Form.tsx

@@ -1,15 +1,29 @@
 import type React from "react";
 import type { HTMLProps } from "react";
 
-import { Button, majorScale, Pane, SavedIcon, Spinner } from "evergreen-ui";
+import { FiSave } from "react-icons/fi";
+
+import { Button } from "@components/Button.js";
+import {
+  ArrowPathIcon,
+  ArrowUturnLeftIcon,
+  ChevronRightIcon,
+  HomeIcon,
+} from "@heroicons/react/24/outline";
 
 export interface FormProps extends HTMLProps<HTMLFormElement> {
+  title: string;
+  breadcrumbs: string[];
+  reset: () => void;
   onSubmit: (event: React.FormEvent<HTMLFormElement>) => Promise<void>;
   loading: boolean;
   dirty: boolean;
 }
 
 export const Form = ({
+  title,
+  breadcrumbs,
+  reset,
   loading,
   dirty,
   children,
@@ -18,31 +32,48 @@ export const Form = ({
 }: FormProps): JSX.Element => {
   return (
     // eslint-disable-next-line @typescript-eslint/no-misused-promises
-    <form onSubmit={onSubmit} style={{ position: "relative" }} {...props}>
+    <form className="w-full" onSubmit={onSubmit} {...props}>
       {loading && (
-        <Pane
-          position="absolute"
-          display="flex"
-          width="100%"
-          height="100%"
-          backgroundColor="rgba(67, 90, 111, 0.2)"
-          zIndex={10}
-          borderRadius={majorScale(1)}
-        >
-          <Spinner margin="auto" />
-        </Pane>
+        <div className="absolute flex w-full h-full bg-slate-600 rounded-md z-10">
+          <ArrowPathIcon className="h-8 animate-spin m-auto" />
+        </div>
       )}
-      {children}
-      <Pane display="flex" marginTop={majorScale(2)}>
-        <Button
-          type="submit"
-          marginLeft="auto"
-          disabled={!dirty}
-          iconBefore={<SavedIcon />}
-        >
-          Save
-        </Button>
-      </Pane>
+      <div className="select-none rounded-md p-4 bg-gray-700">
+        <ol className="flex gap-4">
+          <li className="text-gray-400 hover:text-gray-200 cursor-pointer">
+            <HomeIcon className="h-5 w-5 flex-shrink-0 text-gray-400" />
+          </li>
+          {breadcrumbs.map((breadcrumb, index) => (
+            <li key={index} className="flex gap-4">
+              <ChevronRightIcon className="h-5 w-5 flex-shrink-0 text-gray-500" />
+              <span className="text-sm font-medium text-gray-400 hover:text-gray-200 cursor-pointer">
+                {breadcrumb}
+              </span>
+            </li>
+          ))}
+        </ol>
+        <div className="mt-2 flex items-center">
+          <h2 className="font-bold text-white truncate text-3xl tracking-tight">
+            {title}
+          </h2>
+          <div className="flex gap-2 ml-auto">
+            <Button
+              type="button"
+              onClick={() => {
+                reset();
+              }}
+              variant="secondary"
+              iconBefore={<ArrowUturnLeftIcon className="w-4" />}
+            >
+              Reset
+            </Button>
+            <Button disabled={!dirty} iconBefore={<FiSave className="w-4" />}>
+              Save
+            </Button>
+          </div>
+        </div>
+      </div>
+      <div className="flex flex-col p-2 gap-3">{children}</div>
     </form>
   );
 };