Dropdown

"use client";
import { Button, Dropdown } from "@g4rcez/components";

function BasicDropdown() {
  return (
    <Dropdown trigger={<Button>Open dropdown</Button>} title="Options">
      <ul className="flex flex-col gap-2">
        <li><button type="button" className="w-full text-left px-2 py-1 rounded hover:bg-muted">Profile</button></li>
        <li><button type="button" className="w-full text-left px-2 py-1 rounded hover:bg-muted">Settings</button></li>
        <li><button type="button" className="w-full text-left px-2 py-1 rounded hover:bg-muted text-danger">Sign out</button></li>
      </ul>
    </Dropdown>
  );
}

"use client";
import { Button, Dropdown } from "@g4rcez/components";

function HoverDropdown() {
  return (
    <Dropdown hover trigger={<Button theme="secondary">Hover me</Button>} title="Quick info">
      <p className="text-sm text-secondary max-w-48">
        This dropdown opens on hover and closes when you move away.
      </p>
    </Dropdown>
  );
}

"use client";
import { useState } from "react";
import { Button, Dropdown } from "@g4rcez/components";

function ControlledDropdown() {
  const [open, setOpen] = useState(false);
  return (
    <div className="flex items-center gap-4">
      <Dropdown
        open={open}
        onChange={setOpen}
        trigger={<Button theme="info">Controlled</Button>}
        title="Controlled panel"
      >
        <p className="text-sm">Opened from outside: {open ? "yes" : "no"}</p>
      </Dropdown>
      <Button theme="muted" onClick={() => setOpen((v) => !v)}>
        {open ? "Close" : "Open"} externally
      </Button>
    </div>
  );
}