Popover

import { useT } from '@iffday/i18n';
import { Button, Pill, Popover } from '@iffday/ui';

export default function Example() {
  const t = useT();
  const tags = ['FIAPF', 'Competitive', 'Asia', 'Market', 'Short films', 'Documentary'];
  return (
    <div className="pill-row">
      {tags.slice(0, 2).map((tag) => (
        <Pill key={tag}>{tag}</Pill>
      ))}
      <Popover
        align="start"
        label={t('festival.directory.allTags')}
        trigger={
          <Button
            type="button"
            className="button small soft"
            aria-label={t('festival.directory.showAllTagsLabel', { 0: tags.length })}
          >
            +{tags.length - 2}
          </Button>
        }
      >
        <div className="pill-row" style={{ padding: 6, maxWidth: 260 }}>
          {tags.map((tag) => (
            <Pill key={tag}>{tag}</Pill>
          ))}
        </div>
      </Popover>
    </div>
  );
}