HoverCard

'use client';

import { Avatar, Badge, HoverCard } from '@akhatmirzo/ui';
import { CalendarDays } from 'lucide-react';

export default function HoverCardProfile() {
  return (
    <p className="m-0 text-sm">
      Kutubxona muallifi —{' '}
      <HoverCard>
        <HoverCard.Trigger asChild>
          <a
            href="https://github.com/Akhatmirzo"
            className="focus-ring rounded-sm font-medium text-primary underline-offset-4 hover:underline"
          >
            @akhatmirzo
          </a>
        </HoverCard.Trigger>
        <HoverCard.Content align="start">
          <div className="flex gap-3">
            <Avatar name="Akhatmirzo Umarov" />
            <div className="flex min-w-0 flex-col gap-1">
              <span className="font-semibold">Akhatmirzo Umarov</span>
              <span className="text-text-muted">
                Frontend dasturchi. React, TypeScript va o'zbekcha UI.
              </span>
              <span className="mt-1 flex items-center gap-2 text-xs text-text-muted">
                <CalendarDays className="size-3.5" aria-hidden="true" />
                2021-yildan beri
                <Badge size="sm" color="success">
                  Ochiq
                </Badge>
              </span>
            </div>
          </div>
        </HoverCard.Content>
      </HoverCard>
      .
    </p>
  );
}

'use client';

import { HoverCard } from '@akhatmirzo/ui';

export default function HoverCardSizes() {
  return (
    <div className="flex flex-wrap items-center gap-6 text-sm">
      {(['sm', 'md'] as const).map((size) => (
        <HoverCard key={size}>
          <HoverCard.Trigger asChild>
            <a
              href="#chorsu"
              className="focus-ring rounded-sm font-medium text-primary underline underline-offset-4"
            >
              size=&quot;{size}&quot;
            </a>
          </HoverCard.Trigger>
          <HoverCard.Content size={size}>
            <p className="m-0 font-semibold">Chorsu Market</p>
            <p className="m-0 mt-1 text-text-muted">
              Toshkentdagi onlayn do'kon: 12 000+ mahsulot, 1 kunda yetkazib berish.
            </p>
          </HoverCard.Content>
        </HoverCard>
      ))}
    </div>
  );
}

'use client';

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

const sides = ['top', 'right', 'bottom', 'left'] as const;

export default function HoverCardPlacement() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      {sides.map((side) => (
        <HoverCard key={side} openDelay={200} closeDelay={100}>
          <HoverCard.Trigger asChild>
            <Button variant="outline">{side}</Button>
          </HoverCard.Trigger>
          <HoverCard.Content side={side} size="sm">
            <p className="m-0">
              Panel <b>{side}</b> tomonda. Ekran chetiga yetsa, o'zi teskari tomonga o'tadi.
            </p>
          </HoverCard.Content>
        </HoverCard>
      ))}
    </div>
  );
}