Badge

import {Badge} from '@stroeer-labs/design-library/react';
import {BadgeCheckIcon} from 'lucide-react';

export function BadgeDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Variants</p>
                <div className="flex flex-wrap gap-2">
                    <Badge>Default</Badge>
                    <Badge variant="secondary">Secondary</Badge>
                    <Badge variant="destructive">Destructive</Badge>
                    <Badge variant="warning">Warning</Badge>
                    <Badge variant="info">Info</Badge>
                    <Badge variant="outline">Outline</Badge>
                    <Badge variant="ghost">Ghost</Badge>
                    <Badge variant="link">Link</Badge>
                </div>
            </div>

            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">As link (render prop)</p>
                <div className="flex flex-wrap gap-2">
                    {/* biome-ignore lint/a11y/useAnchorContent: children are merged into the anchor by the render prop (Base UI useRender) */}
                    <Badge variant="outline" render={<a href="/components/badge" />}>
                        Badge
                    </Badge>
                    {/* biome-ignore lint/a11y/useAnchorContent: children are merged into the anchor by the render prop (Base UI useRender) */}
                    <Badge variant="secondary" render={<a href="/components/button" />}>
                        Button
                    </Badge>
                </div>
            </div>

            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">With icon</p>
                <div className="flex flex-wrap gap-2">
                    <Badge variant="secondary">
                        <BadgeCheckIcon />
                        Verified
                    </Badge>
                </div>
            </div>

            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Count</p>
                <div className="flex flex-wrap items-center gap-2">
                    <Badge className="h-5 min-w-5 justify-center rounded-full px-1 font-mono tabular-nums">8</Badge>
                    <Badge variant="destructive" className="h-5 min-w-5 justify-center rounded-full px-1 font-mono tabular-nums">
                        99
                    </Badge>
                    <Badge variant="outline" className="h-5 min-w-5 justify-center rounded-full px-1 font-mono tabular-nums">
                        20+
                    </Badge>
                </div>
            </div>
        </div>
    );
}

import {Component} from '@angular/core';
import {NgIcon, provideIcons} from '@ng-icons/core';
import {lucideBadgeCheck} from '@ng-icons/lucide';
import {HlmBadgeImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-badge-demo',
    standalone: true,
    imports: [HlmBadgeImports, NgIcon],
    viewProviders: [provideIcons({lucideBadgeCheck})],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Variants</p>
        <div class="flex flex-wrap gap-2">
          <span hlmBadge>Default</span>
          <span hlmBadge variant="secondary">Secondary</span>
          <span hlmBadge variant="destructive">Destructive</span>
          <span hlmBadge variant="warning">Warning</span>
          <span hlmBadge variant="info">Info</span>
          <span hlmBadge variant="outline">Outline</span>
          <span hlmBadge variant="ghost">Ghost</span>
          <span hlmBadge variant="link">Link</span>
        </div>
      </div>

      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">As link (anchor host)</p>
        <div class="flex flex-wrap gap-2">
          <a hlmBadge variant="outline" href="/components/badge">Badge</a>
          <a hlmBadge variant="secondary" href="/components/button">Button</a>
        </div>
      </div>

      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">With icon</p>
        <div class="flex flex-wrap gap-2">
          <span hlmBadge variant="secondary">
            <ng-icon name="lucideBadgeCheck" />
            Verified
          </span>
        </div>
      </div>

      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Count</p>
        <div class="flex flex-wrap items-center gap-2">
          <span hlmBadge class="h-5 min-w-5 justify-center rounded-full px-1 font-mono tabular-nums">8</span>
          <span hlmBadge variant="destructive" class="h-5 min-w-5 justify-center rounded-full px-1 font-mono tabular-nums">99</span>
          <span hlmBadge variant="outline" class="h-5 min-w-5 justify-center rounded-full px-1 font-mono tabular-nums">20+</span>
        </div>
      </div>
    </div>
  `,
})
export class BadgeDemoComponent {}