Popover

import {
  Button,
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@smallest-inc/ui";

export default function PopoverDefault() {
  return (
    <Popover>
      <PopoverTrigger render={<Button variant="secondary" />}>Usage</PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>Usage this month</PopoverTitle>
          <PopoverDescription>
            8,420 of 10,000 call minutes used. Minutes reset on October 1.
          </PopoverDescription>
        </PopoverHeader>
      </PopoverContent>
    </Popover>
  );
}

import { useState } from "react";
import {
  Button,
  Input,
  Label,
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverHeader,
  PopoverTitle,
  PopoverTrigger,
} from "@smallest-inc/ui";

export default function PopoverWithFields() {
  const [open, setOpen] = useState(false);

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger render={<Button variant="secondary" />}>Rename view</PopoverTrigger>
      <PopoverContent>
        <PopoverHeader>
          <PopoverTitle>Rename view</PopoverTitle>
          <PopoverDescription>The name shows in the sidebar for everyone in the workspace.</PopoverDescription>
        </PopoverHeader>
        <div className="mt-1.5 flex flex-col gap-1.5">
          <Label htmlFor="view-name">View name</Label>
          <Input id="view-name" defaultValue="Escalated support calls" />
        </div>
        <div className="mt-1.5 flex justify-end gap-2">
          <Button variant="transparent" size="sm" onClick={() => setOpen(false)}>
            Cancel
          </Button>
          <Button size="sm" onClick={() => setOpen(false)}>
            Save
          </Button>
        </div>
      </PopoverContent>
    </Popover>
  );
}

import {
  Button,
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTrigger,
} from "@smallest-inc/ui";

const sides = [
  { side: "top", label: "Top" },
  { side: "right", label: "Right" },
  { side: "bottom", label: "Bottom" },
  { side: "left", label: "Left" },
] as const;

export default function PopoverSide() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sides.map(({ side, label }) => (
        <Popover key={side}>
          <PopoverTrigger render={<Button variant="secondary" />}>{label}</PopoverTrigger>
          <PopoverContent side={side} className="w-56">
            <PopoverDescription>Opens on the {side} of the trigger when there is room.</PopoverDescription>
          </PopoverContent>
        </Popover>
      ))}
    </div>
  );
}

import {
  Button,
  Popover,
  PopoverContent,
  PopoverDescription,
  PopoverTrigger,
} from "@smallest-inc/ui";

const aligns = [
  { align: "start", label: "Start" },
  { align: "center", label: "Center" },
  { align: "end", label: "End" },
] as const;

export default function PopoverAlign() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {aligns.map(({ align, label }) => (
        <Popover key={align}>
          <PopoverTrigger render={<Button variant="secondary" />}>{label}</PopoverTrigger>
          <PopoverContent align={align} className="w-56">
            <PopoverDescription>Aligned to the {align} of the trigger.</PopoverDescription>
          </PopoverContent>
        </Popover>
      ))}
    </div>
  );
}