Variants, an icon and a link

// apps/docs/examples/ui/badge.tsx'use client';
import {BadgeCheckIcon, ExternalLinkIcon} from 'lucide-react';
import {Badge} from '@workspace/active-ui/components/primitives/badge';
/** * A short label beside other content: a status, a count, a category. Six * variants, an icon beside the text, and a badge that is a link. */export default function BadgeExample() {  return (    <div className="flex flex-col items-center gap-4">      <div className="flex flex-wrap justify-center gap-2">        <Badge>Default</Badge>        <Badge variant="secondary">Secondary</Badge>        <Badge variant="outline">Outline</Badge>        <Badge variant="destructive">Overdue</Badge>        <Badge variant="ghost">Ghost</Badge>        <Badge variant="link">Link style</Badge>      </div>      <div className="flex flex-wrap justify-center gap-2">        <Badge variant="secondary">          <BadgeCheckIcon data-icon="inline-start" aria-hidden />          Verified        </Badge>        <Badge variant="outline" className="tabular-nums">          12 new        </Badge>        <Badge variant="outline" render={<a href="#badge-api" />}>          API reference          <ExternalLinkIcon data-icon="inline-end" aria-hidden />        </Badge>      </div>    </div>  );}