Show import errors

src-web/hooks/Alert.tsx

@@ -0,0 +1,21 @@
+import type { ReactNode } from 'react';
+import { Button } from '../components/core/Button';
+import { HStack, VStack } from '../components/core/Stacks';
+
+export interface AlertProps {
+  onHide: () => void;
+  body: ReactNode;
+}
+
+export function Alert({ onHide, body }: AlertProps) {
+  return (
+    <VStack space={3}>
+      <div>{body}</div>
+      <HStack space={2} justifyContent="end">
+        <Button className="focus" color="primary" onClick={onHide}>
+          Okay
+        </Button>
+      </HStack>
+    </VStack>
+  );
+}

src-web/hooks/useAlert.ts

@@ -0,0 +1,15 @@
+import type { DialogProps } from '../components/core/Dialog';
+import { useDialog } from '../components/DialogContext';
+import type { AlertProps } from './Alert';
+import { Alert } from './Alert';
+
+export function useAlert() {
+  const dialog = useDialog();
+  return ({ title, body }: { title: DialogProps['title']; body: AlertProps['body'] }) =>
+    dialog.show({
+      title,
+      hideX: true,
+      size: 'sm',
+      render: ({ hide }) => Alert({ onHide: hide, body }),
+    });
+}