Confirmation Dialogs

src-web/hooks/Confirm.tsx

@@ -0,0 +1,16 @@
+import { Button } from '../components/core/Button';
+import { HStack } from '../components/core/Stacks';
+
+interface Props {
+  hide: () => void;
+}
+export function Confirm({ hide }: Props) {
+  return (
+    <HStack space={2} justifyContent="end">
+      <Button color="gray" onClick={hide}>
+        Cancel
+      </Button>
+      <Button color="primary">Confirm</Button>
+    </HStack>
+  );
+}

src-web/hooks/useConfirm.tsx

@@ -0,0 +1,14 @@
+import { useDialog } from '../components/DialogContext';
+import { Confirm } from './Confirm';
+
+export function useConfirm() {
+  const dialog = useDialog();
+  return ({ title, description }: { title: string; description?: string }) => {
+    dialog.show({
+      title,
+      description,
+      hideX: true,
+      render: Confirm,
+    });
+  };
+}