Announcement pill

'use client';

import * as React from 'react';
import { AnnouncementPill } from './announcement-pill';

const NOTES = [
  'Search now finds words inside your files.',
  'Shared folders sync in the background.',
  'Dark mode follows your system setting.',
];

export default function AnnouncementPillDemo({ replay = 0 }: { replay?: number }) {
  const root = React.useRef<HTMLDivElement>(null);

  // Replay closes the card if it is open, then opens it again after a short pause so the grow can be seen.
  React.useEffect(() => {
    if (replay === 0) return;
    const pill = () => root.current?.querySelector<HTMLElement>('button[data-slot="pill"]');
    if (pill()?.getAttribute('aria-expanded') === 'true') pill()?.click();
    const timer = window.setTimeout(() => pill()?.click(), 1100);
    return () => window.clearTimeout(timer);
  }, [replay]);

  return (
    <div ref={root} className="flex min-h-[300px] w-full max-w-[640px] flex-col items-center gap-6 pt-6">
      <AnnouncementPill
        more="See what changed"
        card={
          <div className="flex flex-col gap-3">
            <div className="flex items-center gap-2 pe-8">
              <span className="inline-flex items-center rounded-full border border-utility-brand-200 bg-utility-brand-50 px-2 py-0.5 text-xs font-medium text-utility-brand-700">
                New
              </span>
              <span className="text-xs text-tertiary">Released Oct 12</span>
            </div>
            <h3 className="m-0 text-md font-semibold text-primary">Version 2.4 is out</h3>
            <ul className="m-0 flex list-none flex-col gap-2 p-0">
              {NOTES.map((note) => (
                <li key={note} className="flex items-start gap-2 text-sm text-secondary">
                  <svg
                    aria-hidden="true"
                    viewBox="0 0 16 16"
                    fill="none"
                    stroke="var(--lunia-fg-success-primary)"
                    strokeWidth="1.5"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                    className="mt-0.5 size-4 shrink-0"
                  >
                    <path d="m3.5 8.5 3 3 6-7" />
                  </svg>
                  {note}
                </li>
              ))}
            </ul>
            <a
              href="#release-notes"
              className="inline-flex w-fit items-center gap-1 text-sm font-semibold text-brand-secondary"
            >
              Read the release notes
              <svg
                aria-hidden="true"
                viewBox="0 0 16 16"
                fill="none"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="size-4"
              >
                <path d="M3.5 8h9M8.75 4.25 12.5 8l-3.75 3.75" />
              </svg>
            </a>
          </div>
        }
      >
        Version 2.4 is out
      </AnnouncementPill>
      <h2 className="m-0 text-display-xs font-semibold text-primary">Build things that last</h2>
    </div>
  );
}