Popover

"use client";

import { useState } from "react";
import { Popover, Checkbox, Button, Badge } from "@pimolu/react";

const filterOptions = [
  "Design tokens",
  "Components",
  "Playground",
];

function FilterPopover() {
  const [isOpen, setIsOpen] = useState(false);
  const [selected, setSelected] = useState<string[]>([
    "Components",
  ]);
  function toggle(option: string, checked: boolean) {
    setSelected((current) => checked
      ? [...current, option]
      : current.filter((item) => item !== option));
  }
  return (
    <Popover
      label="Filter the component list"
      open={isOpen}
      onOpenChange={setIsOpen}
      content={<div
        className="grid gap-5 min-w-0"
      >
        <div>
          <p className="mb-2 font-medium">Filter</p>
          <p className="text-sm text-muted">
            The panel stays open while you choose, because the open state is
            controlled by the page.
          </p>
        </div>
        <div className="grid gap-5 min-w-0">
          {
            filterOptions.map((option) => (<Checkbox
              key={option}
              label={option}
              checked={selected.includes(option)}
              onCheckedChange={(checked) => toggle(
                option,
                checked
              )}
            />))
          }
        </div>
        <div className="flex flex-wrap items-center gap-3 min-w-0 justify-between">
          <Button size="sm" appearance="ghost" onClick={() => setSelected([])}>Reset</Button>
          <Button size="sm" onClick={() => setIsOpen(false)}>Apply</Button>
        </div>
      </div>}
    >
      <Button appearance="outline">
        <span className="flex flex-wrap items-center gap-3 min-w-0">
          Filter
          <Badge size="sm" variant="primary">
            {selected.length}
          </Badge>
        </span>
      </Button>
    </Popover>
  );
}

export function DemoExample() {
  return (<FilterPopover />);
}