Badge

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmBadgeImports } from '@spartan-ng/helm/badge';

@Component({
	selector: 'spartan-badge-preview',
	imports: [HlmBadgeImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="flex w-full flex-wrap justify-center gap-2">
			<span hlmBadge>Badge</span>
			<span hlmBadge variant="secondary">Secondary</span>
			<span hlmBadge variant="destructive">Destructive</span>
			<span hlmBadge variant="outline">Outline</span>
		</div>
	`,
})
export class BadgePreview {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmBadgeImports } from '@spartan-ng/helm/badge';

@Component({
	selector: 'spartan-badge-variants-preview',
	imports: [HlmBadgeImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="flex w-full flex-wrap justify-center gap-2">
			<span hlmBadge>Badge</span>
			<span hlmBadge variant="secondary">Secondary</span>
			<span hlmBadge variant="destructive">Destructive</span>
			<span hlmBadge variant="outline">Outline</span>
			<span hlmBadge variant="ghost">Ghost</span>
		</div>
	`,
})
export class BadgeVariantsPreview {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideBadgeCheck, lucideBookmark } from '@ng-icons/lucide';
import { HlmBadgeImports } from '@spartan-ng/helm/badge';

@Component({
	selector: 'spartan-badge-icons-preview',
	imports: [HlmBadgeImports, NgIcon],
	providers: [provideIcons({ lucideBadgeCheck, lucideBookmark })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="flex w-full flex-wrap justify-center gap-2">
			<span hlmBadge variant="secondary">
				<ng-icon name="lucideBadgeCheck" />
				Verified
			</span>
			<span hlmBadge variant="outline">
				Bookmark
				<ng-icon name="lucideBookmark" />
			</span>
		</div>
	`,
})
export class BadgeIconsPreview {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmBadgeImports } from '@spartan-ng/helm/badge';
import { HlmSpinnerImports } from '@spartan-ng/helm/spinner';

@Component({
	selector: 'spartan-badge-spinner-preview',
	imports: [HlmBadgeImports, HlmSpinnerImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="flex w-full flex-wrap justify-center gap-2">
			<span hlmBadge variant="secondary">
				<hlm-spinner class="text-xs" />
				Verified
			</span>
			<span hlmBadge variant="outline">
				Bookmark
				<hlm-spinner class="text-xs" />
			</span>
		</div>
	`,
})
export class BadgeSpinnerPreview {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { RouterLink } from '@angular/router';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideArrowUpRight } from '@ng-icons/lucide';
import { HlmBadgeImports } from '@spartan-ng/helm/badge';

@Component({
	selector: 'spartan-badge-link',
	imports: [HlmBadgeImports, RouterLink, NgIcon],
	providers: [provideIcons({ lucideArrowUpRight })],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="flex gap-2">
			<a hlmBadge routerLink=".">Angular Route</a>
			<a hlmBadge variant="secondary" href="https://spartan.ng" target="_blank" rel="noopener noreferrer">
				External Link
				<ng-icon name="lucideArrowUpRight" />
			</a>
		</div>
	`,
})
export class BadgeLink {}

import { ChangeDetectionStrategy, Component } from '@angular/core';
import { HlmBadgeImports } from '@spartan-ng/helm/badge';

@Component({
	selector: 'spartan-badge-colors-preview',
	imports: [HlmBadgeImports],
	changeDetection: ChangeDetectionStrategy.OnPush,
	template: `
		<div class="flex w-full flex-wrap justify-center gap-2">
			<span hlmBadge class="dark:text-bg-blue-300 bg-blue-50 text-blue-700 dark:bg-blue-950">Blue</span>
			<span hlmBadge class="dark:text-bg-green-300 bg-green-50 text-green-700 dark:bg-green-950">Green</span>
			<span hlmBadge class="dark:text-bg-sky-300 bg-sky-50 text-sky-700 dark:bg-sky-950">Sky</span>
			<span hlmBadge class="dark:text-bg-purple-300 bg-purple-50 text-purple-700 dark:bg-purple-950">Purple</span>
			<span hlmBadge class="dark:text-bg-red-300 bg-red-50 text-red-700 dark:bg-red-950">Red</span>
		</div>
	`,
})
export class BadgeColorsPreview {}