"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export interface PopoverFormProps {
  title?: string;
  description?: string;
  className?: string;
}

export function PopoverForm({
  title = "Invite someone",
  description = "Send a quick invite with their name and email.",
  className,
}: PopoverFormProps) {
  const [open, setOpen] = React.useState(false);
  const popoverRef = React.useRef<HTMLDivElement>(null);

  React.useEffect(() => {
    if (!open) {
      return;
    }

    const handleKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") {
        event.preventDefault();
        setOpen(false);
      }
    };

    const handleClick = (event: MouseEvent) => {
      if (!popoverRef.current?.contains(event.target as Node)) {
        setOpen(false);
      }
    };

    window.addEventListener("keydown", handleKey);
    window.addEventListener("mousedown", handleClick);

    return () => {
      window.removeEventListener("keydown", handleKey);
      window.removeEventListener("mousedown", handleClick);
    };
  }, [open]);

  return (
    <div className={cn("relative inline-flex", className)} ref={popoverRef}>
      <button
        type="button"
        onClick={() => setOpen((prev) => !prev)}
        className="rounded-lg border border-border bg-card px-4 py-2 text-sm font-medium text-foreground shadow-sm transition hover:bg-muted"
        aria-expanded={open}
        aria-haspopup="dialog"
      >
        Add invite
      </button>

      {open ? (
        <div
          role="dialog"
          aria-label="Invite form"
          className="absolute left-1/2 top-full z-40 mt-3 w-72 -translate-x-1/2 rounded-xl border border-border bg-card p-4 shadow-lg"
        >
          <div className="space-y-2">
            <p className="text-sm font-semibold text-foreground">{title}</p>
            <p className="text-xs text-muted-foreground">{description}</p>
          </div>
          <form className="mt-4 space-y-3">
            <label className="block text-xs font-medium text-muted-foreground">
              Name
              <input
                type="text"
                placeholder="Riley Harper"
                className="mt-1 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
              />
            </label>
            <label className="block text-xs font-medium text-muted-foreground">
              Email
              <input
                type="email"
                placeholder="riley@company.com"
                className="mt-1 w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground focus:outline-none"
              />
            </label>
            <button
              type="submit"
              className="w-full rounded-lg border border-border bg-muted px-3 py-2 text-sm font-medium text-foreground transition hover:bg-background"
            >
              Send invite
            </button>
          </form>
        </div>
      ) : null}
    </div>
  );
}
Popover Form

Dependencies

Files

Installation
