feat: start of popup

packages/website-ue/src/components/Dialog/index.module.css

@@ -0,0 +1,33 @@
+.trigger {
+  display: contents;
+  cursor: pointer;
+}
+
+.overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100dvh;
+
+  background-color: var(--black-a9);
+  z-index: 1;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--space-4);
+
+  .content {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-4);
+
+    min-width: 25rem;
+
+    background-color: var(--gray-3);
+    padding: var(--space-4);
+    box-shadow: var(--shadow-interactive), var(--shadow-aggressive);
+    border-radius: var(--space-3);
+  }
+}

packages/website-ue/src/components/Dialog/index.tsx

@@ -0,0 +1,80 @@
+import { createContext, useContext, useState, type ReactNode } from "react";
+import styles from "./index.module.css";
+
+const DialogContext = createContext<{
+  open: boolean;
+  setOpen: (open: boolean) => void;
+} | null>(null);
+
+function useDialog() {
+  const context = useContext(DialogContext);
+
+  if (context === null) {
+    throw new Error("Dialog components must be used within a Dialog.Root");
+  }
+
+  return context;
+}
+
+interface RootProps {
+  children: ReactNode;
+}
+
+function Root({ children }: RootProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <DialogContext.Provider value={{ open, setOpen }}>
+      {children}
+    </DialogContext.Provider>
+  );
+}
+
+interface TriggerProps {
+  children: ReactNode;
+}
+
+function Trigger({ children }: TriggerProps) {
+  const { setOpen } = useDialog();
+
+  return (
+    <div
+      className={styles.trigger}
+      onClick={() => {
+        setOpen(true);
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface ContentProps {
+  children: ReactNode;
+}
+
+function Content({ children }: ContentProps) {
+  const { open, setOpen } = useDialog();
+
+  if (!open) return null;
+
+  return (
+    <div
+      className={styles.overlay}
+      onClick={() => {
+        setOpen(false);
+      }}
+    >
+      <div
+        className={styles.content}
+        onClick={(event) => {
+          event.stopPropagation();
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export const Dialog = { Root, Trigger, Content };