1 files changed, 41 insertions, 0 deletions

diff --git a/src/ui/objects/Dialog.tsx b/src/ui/objects/Dialog.tsx
new file mode 100644
index 0000000..8ab6c4f
--- /dev/null
+++ b/src/ui/objects/Dialog.tsx
@@ -0,0 +1,41 @@
+import type { HTMLAttributes } from "corvos/plugins/jsx.ts";
+
+import { Icon } from "$/ui/objects/Icon.tsx";
+
+import { Container } from "../layouts/Container.tsx";
+import { ActionButton } from "./ActionButton.tsx";
+import { Divider } from "./Divider.tsx";
+import { Heading } from "./Heading.tsx";
+
+export type Props = HTMLAttributes<"dialog"> & {
+        title: string;
+        divider?: boolean;
+        children?: JSX.Element;
+};
+
+export const Dialog = ({ children, title, divider, class: cls, ...props }: Props) => (
+        <dialog popover="auto" class:list={["o-dialog is-modal", cls]} closedby="any" {...props}>
+                <Container fixed class="o-dialog__content">
+                        <header class="o-dialog__header">
+                                <Heading as="h1" class="u-mbs-0" level="xxl">
+                                        {title}
+                                </Heading>
+
+                                <ActionButton
+                                        command="close"
+                                        commandfor={props.id}
+                                        as="button"
+                                        pill
+                                        size="lg"
+                                        level="quiet"
+                                        icon={<Icon icon="x" variant="bold" />}
+                                        class="u-mis-auto"
+                                />
+                        </header>
+
+                        {divider && <Divider level="faint" class="o-dialog__divider" />}
+
+                        <div class="o-dialog__body">{children}</div>
+                </Container>
+        </dialog>
+);