Popover

'use client';

import { Button, Input, Popover } from '@akhatmirzo/ui';
import { Funnel } from 'lucide-react';
import { useState } from 'react';

export default function PopoverFilter() {
  const [open, setOpen] = useState(false);
  const [range, setRange] = useState({ from: '', to: '' });
  const [applied, setApplied] = useState<string | null>(null);

  return (
    <div className="flex flex-wrap items-center gap-3">
      <Popover open={open} onOpenChange={setOpen}>
        <Popover.Trigger asChild>
          <Button leftIcon={<Funnel />}>Narx</Button>
        </Popover.Trigger>
        <Popover.Content align="start" aria-label="Narx filtri">
          <form
            className="flex flex-col gap-3"
            onSubmit={(e) => {
              e.preventDefault();
              setApplied(`${range.from || '0'} – ${range.to || '∞'} so'm`);
              setOpen(false);
            }}
          >
            <p className="m-0 font-semibold">Narx oralig'i</p>
            <Input
              size="sm"
              inputMode="numeric"
              placeholder="dan"
              suffix="so'm"
              aria-label="Narx: dan"
              value={range.from}
              onChange={(e) => setRange((r) => ({ ...r, from: e.target.value }))}
            />
            <Input
              size="sm"
              inputMode="numeric"
              placeholder="gacha"
              suffix="so'm"
              aria-label="Narx: gacha"
              value={range.to}
              onChange={(e) => setRange((r) => ({ ...r, to: e.target.value }))}
            />
            <div className="mt-1 flex justify-end gap-2">
              <Popover.Close asChild>
                <Button size="sm">Bekor</Button>
              </Popover.Close>
              <Button size="sm" variant="primary" type="submit">
                Qo'llash
              </Button>
            </div>
          </form>
        </Popover.Content>
      </Popover>
      <span className="text-sm text-text-muted">{applied ?? "Filtr qo'llanmagan"}</span>
    </div>
  );
}

'use client';

import { Button, Popover } from '@akhatmirzo/ui';

export default function PopoverPlacement() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
        <Popover key={side}>
          <Popover.Trigger asChild>
            <Button variant="outline">{side}</Button>
          </Popover.Trigger>
          <Popover.Content side={side} arrow className="w-56" aria-label={`Tomon: ${side}`}>
            <p className="m-0 text-text-muted">
              Panel <b className="text-text">{side}</b> tomonda, triggerdan 6px uzoqlikda.
            </p>
          </Popover.Content>
        </Popover>
      ))}
      <Popover>
        <Popover.Trigger asChild>
          <Button variant="outline">align=end</Button>
        </Popover.Trigger>
        <Popover.Content align="end" className="w-56" aria-label="O'ngga tekislangan">
          <p className="m-0 text-text-muted">Panel triggerning o'ng chetiga tekislangan.</p>
        </Popover.Content>
      </Popover>
    </div>
  );
}

'use client';

import { Field, IconButton, Popover, Switch } from '@akhatmirzo/ui';
import { Bell } from 'lucide-react';

export default function PopoverSettings() {
  return (
    <Popover>
      <Popover.Trigger asChild>
        <IconButton variant="outline" aria-label="Bildirishnoma sozlamalari">
          <Bell />
        </IconButton>
      </Popover.Trigger>
      <Popover.Content side="right" align="start" arrow aria-label="Bildirishnomalar">
        <div className="flex flex-col gap-3">
          <p className="m-0 font-semibold">Bildirishnomalar</p>
          <Field label="Email orqali" orientation="horizontal">
            <Switch defaultChecked />
          </Field>
          <Field label="SMS orqali" orientation="horizontal">
            <Switch />
          </Field>
          <Field label="Telegram bot" orientation="horizontal">
            <Switch defaultChecked />
          </Field>
        </div>
      </Popover.Content>
    </Popover>
  );
}

'use client';

import { Button, Popover } from '@akhatmirzo/ui';
import { useState } from 'react';

const colors = [
  { name: 'Asosiy', className: 'bg-primary' },
  { name: 'Yashil', className: 'bg-success' },
  { name: 'Sariq', className: 'bg-warning' },
  { name: 'Qizil', className: 'bg-danger' },
  { name: "Ko'k", className: 'bg-info' },
];

export default function PopoverColorPicker() {
  const [color, setColor] = useState(colors[0]!);

  return (
    <Popover>
      <Popover.Trigger asChild>
        <Button
          variant="outline"
          leftIcon={<span className={`size-3 rounded-full ${color.className}`} />}
        >
          Teg rangi
        </Button>
      </Popover.Trigger>
      <Popover.Content className="w-auto" aria-label="Rang tanlash">
        <div className="flex gap-2">
          {colors.map((c) => (
            <Popover.Close key={c.name} asChild>
              <button
                type="button"
                aria-label={c.name}
                aria-pressed={c.name === color.name}
                onClick={() => setColor(c)}
                className={`focus-ring size-7 cursor-pointer rounded-full border-2 border-surface-raised ${c.className} aria-pressed:ring-2 aria-pressed:ring-primary`}
              />
            </Popover.Close>
          ))}
        </div>
      </Popover.Content>
    </Popover>
  );
}