Tooltip

'use client';

import { IconButton, Tooltip } from '@akhatmirzo/ui';
import { Copy, Heart, Share2, Trash2 } from 'lucide-react';

export default function TooltipBasic() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Tooltip content="Nusxa olish" shortcut={['mod', 'C']}>
        <IconButton variant="outline" aria-label="Nusxa olish">
          <Copy />
        </IconButton>
      </Tooltip>
      <Tooltip content="Ulashish">
        <IconButton variant="outline" aria-label="Ulashish">
          <Share2 />
        </IconButton>
      </Tooltip>
      <Tooltip content="Sevimlilarga qo'shish">
        <IconButton variant="outline" aria-label="Sevimlilarga qo'shish">
          <Heart />
        </IconButton>
      </Tooltip>
      <Tooltip content="O'chirish" shortcut={['Del']}>
        <IconButton variant="ghost" aria-label="O'chirish">
          <Trash2 />
        </IconButton>
      </Tooltip>
    </div>
  );
}

'use client';

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

export default function TooltipSides() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {(['top', 'right', 'bottom', 'left'] as const).map((side) => (
        <Tooltip key={side} content={`Tomon: ${side}`} side={side}>
          <Button variant="outline">{side}</Button>
        </Tooltip>
      ))}
    </div>
  );
}

'use client';

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

export default function TooltipDelay() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Tooltip content="Darhol chiqadi" delay={0}>
        <Button>delay=0</Button>
      </Tooltip>
      <Tooltip content="Bir soniya kutadi" delay={1000}>
        <Button>delay=1000</Button>
      </Tooltip>
      <Tooltip content="Uzun izoh 240px dan oshsa, keyingi qatorga o'raladi: buyurtma holati har 5 daqiqada yangilanadi.">
        <Button>Uzun matn</Button>
      </Tooltip>
    </div>
  );
}

'use client';

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

export default function TooltipDisabledButton() {
  return (
    <Tooltip content="Ruxsat yo'q: faqat administrator saqlay oladi">
      <span tabIndex={0} className="focus-ring inline-flex rounded-lg">
        <Button variant="primary" disabled>
          Saqlash
        </Button>
      </span>
    </Tooltip>
  );
}

'use client';

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

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

  return (
    <div className="flex flex-wrap items-center gap-3">
      <Button variant="outline" onClick={() => setOpen((o) => !o)}>
        {open ? 'Yashirish' : "Ko'rsatish"}
      </Button>
      <Tooltip content="Boshqariladigan tooltip" open={open} onOpenChange={setOpen}>
        <Button>Nishon</Button>
      </Tooltip>
      <Tooltip content="Bu matn chiqmaydi" disabled>
        <Button>disabled</Button>
      </Tooltip>
    </div>
  );
}