Overlay

import { useSignal } from "@builder.io/qwik";
import { Overlay } from "~/components/ui/base/overlay";
import { Button } from "~/components/ui/base/button";

export default component$(() => {
  const open = useSignal(false);
  return (
    <>
      <Button onClick$={() => (open.value = true)}>Open overlay</Button>
      {open.value && (
        <Overlay onClick$={() => (open.value = false)}>
          <div
            class="fixed left-1/2 top-1/2 z-10 -translate-x-1/2 -translate-y-1/2 rounded-lg bg-surface-raised p-6 shadow-xl"
            onClick$={(e) => e.stopPropagation()}
          >
            <p class="text-body text-label">Content above the overlay</p>
            <Button class="mt-4" onClick$={() => (open.value = false)}>Close</Button>
          </div>
        </Overlay>
      )}
    </>
  );
});