Badge group

'use client';

import * as React from 'react';
import { BadgeGroup } from './badge-group';

export default function BadgeGroupDemo({ replay = 0 }: { replay?: number }) {
  const [hovered, setHovered] = React.useState(false);

  // Replay shows the hover look of the first badge group for a moment.
  React.useEffect(() => {
    if (replay === 0) return;
    setHovered(true);
    const timer = window.setTimeout(() => setHovered(false), 900);
    return () => window.clearTimeout(timer);
  }, [replay]);

  return (
    <div className="flex flex-col items-center gap-4">
      <BadgeGroup badge="New" color="brand" data-hovered={hovered ? '' : undefined}>
        Projects now support shared views
      </BadgeGroup>
      <BadgeGroup badge="Read the update" badgePosition="trailing" type="badge-modern" color="gray">
        Version 2.4 is available
      </BadgeGroup>
      <BadgeGroup badge="Error" color="error" size="lg">
        Payments are paused for this account
      </BadgeGroup>
      <BadgeGroup badge="Done" type="badge-modern" color="success" size="lg">
        Your workspace is ready
      </BadgeGroup>
    </div>
  );
}