wip: gateway

cloud/web/src/ui/dialog.tsx

@@ -0,0 +1,27 @@
+import { Dialog as Kobalte } from "@kobalte/core/dialog"
+import { ComponentProps, ParentProps } from "solid-js"
+
+export type Props = ParentProps<{
+  size?: "sm" | "md"
+  transition?: boolean
+}> &
+  ComponentProps<typeof Kobalte>
+
+export function Dialog(props: Props) {
+  return (
+    <Kobalte {...props}>
+      <Kobalte.Portal>
+        <Kobalte.Overlay data-component="dialog-overlay" />
+        <div data-component="dialog-center">
+          <Kobalte.Content
+            data-transition={props.transition ? "" : undefined}
+            data-size={props.size}
+            data-slot="content"
+          >
+            {props.children}
+          </Kobalte.Content>
+        </div>
+      </Kobalte.Portal>
+    </Kobalte>
+  )
+}