feat: add create/delete dialogs

glzr-io · Feb 9, 2025 · 10123ff · 10123ff
1 parent a22ec3d
commit 10123ff
Show file tree

Hide file tree

Showing 4 changed files with 126 additions and 22 deletions.
diff --git a/packages/settings-ui/src/user-packs/WidgetPackCard.tsx b/packages/settings-ui/src/user-packs/WidgetPackCard.tsx
@@ -27,6 +27,7 @@ import {
 } from '@tabler/icons-solidjs';
 
 import { WidgetPack } from '~/common';
+import { DeleteWidgetPackDialog } from './dialogs/DeleteWidgetPackDialog';
 
 export interface WidgetPackCardProps {
   pack: WidgetPack;
@@ -80,24 +81,10 @@ export function WidgetPackCard(props: WidgetPackCardProps) {
                   <IconTrash class="h-4 w-4" />
                 </Button>
               </AlertDialogTrigger>
-              <AlertDialogContent>
-                <AlertDialogHeader>
-                  <AlertDialogTitle>Delete Widget Pack</AlertDialogTitle>
-                  <AlertDialogDescription>
-                    Are you sure you want to delete "{props.pack.name}"?
-                    This action cannot be undone.
-                  </AlertDialogDescription>
-                </AlertDialogHeader>
-                <AlertDialogFooter>
-                  <AlertDialogClose>Cancel</AlertDialogClose>
-                  <AlertDialogAction
-                    onClick={() => props.onDelete(props.pack.id)}
-                    class="bg-red-500 hover:bg-red-600"
-                  >
-                    Delete
-                  </AlertDialogAction>
-                </AlertDialogFooter>
-              </AlertDialogContent>
+              <DeleteWidgetPackDialog
+                pack={props.pack}
+                onDelete={props.onDelete}
+              />
             </AlertDialog>
           </div>
         </div>

diff --git a/packages/settings-ui/src/user-packs/WidgetPacks.tsx b/packages/settings-ui/src/user-packs/WidgetPacks.tsx
@@ -1,5 +1,7 @@
 import {
   Button,
+  Dialog,
+  DialogTrigger,
   Tabs,
   TabsContent,
   TabsList,
@@ -10,6 +12,10 @@ import { For } from 'solid-js';
 
 import { useUserPacks } from '~/common';
 import { WidgetPackCard } from './WidgetPackCard';
+import {
+  CreateWidgetPackDialog,
+  CreateWidgetPackForm,
+} from './dialogs/CreateWidgetPackDialog';
 
 export function WidgetPacks() {
   const {
@@ -25,15 +31,24 @@ export function WidgetPacks() {
     // TODO
   }
 
+  function handleCreatePack(pack: CreateWidgetPackForm) {
+    // TODO
+  }
+
   return (
     <div class="container mx-auto p-6">
       <div class="flex justify-between items-center mb-6">
         <h1 class="text-3xl font-bold">Widget Packs</h1>
         <div class="flex gap-2">
-          <Button variant="outline">
-            <IconFolderPlus class="mr-2 h-4 w-4" />
-            Create New Pack
-          </Button>
+          <Dialog>
+            <DialogTrigger>
+              <Button variant="outline">
+                <IconFolderPlus class="mr-2 h-4 w-4" />
+                Create New Pack
+              </Button>
+            </DialogTrigger>
+            <CreateWidgetPackDialog onSubmit={handleCreatePack} />
+          </Dialog>
 
           <Button variant="outline">
             <IconBrandGithub class="mr-2 h-4 w-4" />

diff --git a/packages/settings-ui/src/user-packs/dialogs/CreateWidgetPackDialog.tsx b/packages/settings-ui/src/user-packs/dialogs/CreateWidgetPackDialog.tsx
@@ -0,0 +1,61 @@
+import {
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+  DialogFooter,
+  Dialog,
+  TextField,
+  Button,
+} from '@glzr/components';
+import { createForm, Field } from 'smorf';
+
+export type CreateWidgetPackForm = {
+  name: string;
+};
+
+export interface CreateWidgetPackDialogProps {
+  onSubmit: (pack: CreateWidgetPackForm) => void;
+}
+
+export function CreateWidgetPackDialog(
+  props: CreateWidgetPackDialogProps,
+) {
+  const packForm = createForm<CreateWidgetPackForm>({
+    name: '',
+  });
+
+  return (
+    <DialogContent>
+      <DialogHeader>
+        <DialogTitle>Create Widget Pack</DialogTitle>
+        <DialogDescription>
+          Enter a name for your new widget pack.
+        </DialogDescription>
+      </DialogHeader>
+
+      <div class="p-4">
+        <Field of={packForm} path="name">
+          {inputProps => (
+            <TextField
+              id="name"
+              label="Pack Name"
+              placeholder="Enter pack name..."
+              {...inputProps()}
+            />
+          )}
+        </Field>
+      </div>
+
+      <DialogFooter>
+        <Dialog.CloseButton>
+          <Button variant="outline">Cancel</Button>
+        </Dialog.CloseButton>
+
+        <Dialog.CloseButton onClick={() => props.onSubmit(packForm.value)}>
+          <Button disabled={!packForm.value.name.trim()}>Create</Button>
+        </Dialog.CloseButton>
+      </DialogFooter>
+    </DialogContent>
+  );
+}
diff --git a/packages/settings-ui/src/user-packs/dialogs/DeleteWidgetPackDialog.tsx b/packages/settings-ui/src/user-packs/dialogs/DeleteWidgetPackDialog.tsx
@@ -0,0 +1,41 @@
+import {
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogClose,
+  AlertDialogAction,
+} from '@glzr/components';
+
+import { WidgetPack } from '~/common';
+
+export interface DeleteWidgetPackDialogProps {
+  pack: WidgetPack;
+  onDelete: (packId: string) => void;
+}
+
+export function DeleteWidgetPackDialog(
+  props: DeleteWidgetPackDialogProps,
+) {
+  return (
+    <AlertDialogContent>
+      <AlertDialogHeader>
+        <AlertDialogTitle>Delete Widget Pack</AlertDialogTitle>
+        <AlertDialogDescription>
+          Are you sure you want to delete "{props.pack.name}"? This action
+          cannot be undone.
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <AlertDialogFooter>
+        <AlertDialogClose>Cancel</AlertDialogClose>
+        <AlertDialogAction
+          onClick={() => props.onDelete(props.pack.id)}
+          class="bg-red-500 hover:bg-red-600"
+        >
+          Delete
+        </AlertDialogAction>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  );
+}