Popover

"use client";

import { Button } from "@phuctech/ui/components/button";
import { Field, FieldLabel } from "@phuctech/ui/components/field";
import { Input } from "@phuctech/ui/components/input";
import { Popover, PopoverClose, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@phuctech/ui/components/popover";

export function Example() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline">Edit label</Button>} />
      <PopoverContent>
        <PopoverTitle>Edit label</PopoverTitle>
        <PopoverDescription>Make one short change without leaving the current task.</PopoverDescription>
        <Field>
          <FieldLabel htmlFor="popover-label">Label</FieldLabel>
          <Input id="popover-label" defaultValue="Project directory" />
        </Field>
        <div className="flex justify-end gap-2">
          <PopoverClose render={<Button size="sm" variant="outline">Cancel</Button>} />
          <PopoverClose render={<Button size="sm">Save</Button>} />
        </div>
      </PopoverContent>
    </Popover>
  );
}

"use client";

import { Button } from "@phuctech/ui/components/button";
import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@phuctech/ui/components/popover";

const notes = ["Keep the title specific.", "Connect descriptions to their task.", "Preserve focus when closing.", "Allow the growing region to scroll.", "Keep actions near the content."];

export function Example() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="outline">Open review notes</Button>} />
      <PopoverContent className="max-h-48">
        <PopoverTitle>Review notes</PopoverTitle>
        <PopoverDescription>Long content scrolls inside the popup boundary.</PopoverDescription>
        <div className="grid gap-2 text-sm">{notes.concat(notes, notes).map((note, index) => <p key={`${note}-${index}`} className="rounded-md border border-border p-2">{note}</p>)}</div>
      </PopoverContent>
    </Popover>
  );
}

"use client";

import { Button } from "@phuctech/ui/components/button";
import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@phuctech/ui/components/dialog";
import { Popover, PopoverContent, PopoverDescription, PopoverTitle, PopoverTrigger } from "@phuctech/ui/components/popover";

export function Example() {
  return (
    <Dialog>
      <DialogTrigger render={<Button>Open settings</Button>} />
      <DialogContent>
        <DialogHeader><DialogTitle>Settings</DialogTitle><DialogDescription>Popover content remains a small, related layer.</DialogDescription></DialogHeader>
        <Popover>
          <PopoverTrigger render={<Button variant="outline">More details</Button>} />
          <PopoverContent>
            <PopoverTitle>About this setting</PopoverTitle>
            <PopoverDescription>Use a popover for a brief explanation inside a focused dialog task.</PopoverDescription>
          </PopoverContent>
        </Popover>
      </DialogContent>
    </Dialog>
  );
}