public commit

2024-11-16 12:01:47 +01:00
commit 90f80c4280
582 changed files with 49291 additions and 0 deletions
@@ -0,0 +1,116 @@
+import type { IconType } from "react-icons";
+import { TbBox, TbCirclesRelation, TbPhoto } from "react-icons/tb";
+import { twMerge } from "tailwind-merge";
+import {
+   type ModalActions,
+   ModalBody,
+   ModalFooter,
+   type TCreateModalSchema,
+   type TSchemaAction,
+   useStepContext
+} from "./CreateModal";
+import Templates from "./templates/register";
+
+export function StepSelect() {
+   const { nextStep, stepBack, state, setState } = useStepContext<TCreateModalSchema>();
+   const selected = state.action ?? null;
+
+   function handleSelect(action: TSchemaAction) {
+      if (selected === action) {
+         nextStep(action)();
+         return;
+      }
+      setState({ action });
+   }
+
+   return (
+      <>
+         <ModalBody>
+            <p>Choose what type to add.</p>
+            <div className="grid grid-cols-3 gap-3">
+               <RadioCard
+                  Icon={TbBox}
+                  title="Entity"
+                  description="Create a new entity with fields"
+                  onClick={() => handleSelect("entity")}
+                  selected={selected === "entity"}
+               />
+               <RadioCard
+                  Icon={TbCirclesRelation}
+                  title="Relation"
+                  description="Create a new relation between entities"
+                  onClick={() => handleSelect("relation")}
+                  selected={selected === "relation"}
+               />
+               {/*<RadioCard
+                  Icon={TbPhoto}
+                  title="Attach Media"
+                  description="Attach media to an entity"
+                  onClick={() => handleSelect("media")}
+                  selected={selected === "media"}
+               />*/}
+            </div>
+            <div className="flex flex-col gap-2 mt-3">
+               <h3 className="font-bold">Quick templates</h3>
+               <div className="grid grid-cols-2 gap-3">
+                  {Templates.map(([, template]) => (
+                     <RadioCard
+                        key={template.id}
+                        compact
+                        Icon={TbPhoto}
+                        title={template.title}
+                        description={template.description}
+                        onClick={() => handleSelect(template.id)}
+                        selected={selected === template.id}
+                     />
+                  ))}
+               </div>
+            </div>
+         </ModalBody>
+         <ModalFooter
+            next={{
+               onClick: selected && nextStep(selected),
+               disabled: !selected
+            }}
+            prev={{ onClick: stepBack }}
+            prevLabel="Cancel"
+         />
+      </>
+   );
+}
+
+const RadioCard = ({
+   Icon,
+   title,
+   description,
+   onClick,
+   selected,
+   compact = false,
+   disabled = false
+}: {
+   Icon: IconType;
+   title: string;
+   description?: string;
+   selected?: boolean;
+   onClick?: () => void;
+   compact?: boolean;
+   disabled?: boolean;
+}) => {
+   return (
+      <div
+         onClick={disabled !== true ? onClick : undefined}
+         className={twMerge(
+            "flex gap-3 border border-primary/10 rounded cursor-pointer",
+            compact ? "flex-row p-4 items-center" : "flex-col p-5",
+            selected ? "bg-primary/10 border-primary/50" : "hover:bg-primary/5",
+            disabled && "opacity-50"
+         )}
+      >
+         <Icon className="size-10" />
+         <div className="flex flex-col leading-tight">
+            <p className="text-lg font-bold">{title}</p>
+            <p>{description}</p>
+         </div>
+      </div>
+   );
+};