Kbd

import { Component } from '@angular/core';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';

@Component({
	selector: 'spartan-kbd-preview',
	imports: [HlmKbdImports],
	template: `
		<div class="flex flex-col items-center gap-4">
			<kbd hlmKbdGroup>
				<kbd hlmKbd>⌘</kbd>
				<kbd hlmKbd>⇧</kbd>
				<kbd hlmKbd>⌥</kbd>
				<kbd hlmKbd>⌃</kbd>
			</kbd>
			<kbd hlmKbdGroup>
				<kbd hlmKbd>Ctrl</kbd>
				<span>+</span>
				<kbd hlmKbd>B</kbd>
			</kbd>
		</div>
	`,
})
export class KbdPreview {}

import { Component } from '@angular/core';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';

@Component({
	selector: 'spartan-kbd-group-preview',
	imports: [HlmKbdImports],
	template: `
		<div class="flex flex-col items-center gap-4">
			<p class="text-muted-foreground text-sm">
				Use
				<kbd hlmKbdGroup>
					<kbd hlmKbd>Ctrl + B</kbd>
					<kbd hlmKbd>Ctrl + K</kbd>
				</kbd>
				to open the command palette
			</p>
		</div>
	`,
})
export class KbdGroupPreview {}

import { Component } from '@angular/core';
import { HlmButtonImports } from '@spartan-ng/helm/button';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';

@Component({
	selector: 'spartan-kbd-button-preview',
	imports: [HlmKbdImports, HlmButtonImports],
	template: `
		<div class="flex flex-wrap items-center gap-4">
			<button hlmBtn variant="outline" size="sm" class="pr-2">
				Accept
				<kbd hlmKbd>⏎</kbd>
			</button>
			<button hlmBtn variant="outline" size="sm" class="pr-2">
				Cancel
				<kbd hlmKbd>Esc</kbd>
			</button>
		</div>
	`,
})
export class KbdButtonPreview {}

import { Component } from '@angular/core';
import { NgIcon, provideIcons } from '@ng-icons/core';
import { lucideSearch } from '@ng-icons/lucide';
import { HlmInputGroupImports } from '@spartan-ng/helm/input-group';
import { HlmKbdImports } from '@spartan-ng/helm/kbd';

@Component({
	selector: 'spartan-kbd-input-group-preview',
	imports: [HlmKbdImports, HlmInputGroupImports, NgIcon],
	providers: [provideIcons({ lucideSearch })],
	template: `
		<div className="flex w-full max-w-xs flex-col gap-6">
			<div hlmInputGroup>
				<input hlmInputGroupInput placeholder="Search..." />
				<div hlmInputGroupAddon>
					<ng-icon name="lucideSearch" />
				</div>
				<div hlmInputGroupAddon align="inline-end">
					<kbd hlmKbd>⌘</kbd>
					<kbd hlmKbd>K</kbd>
				</div>
			</div>
		</div>
	`,
})
export class KbdInputGroupPreview {}