Kbd

'use client'

import { Kbd, KbdGroup } from '@nerdfish/react/kbd'

export default function KbdExample() {
	return (
		<div className="flex flex-col items-center gap-4">
			<KbdGroup>
				<Kbd>⌘</Kbd>
				<Kbd>⇧</Kbd>
				<Kbd>⌥</Kbd>
				<Kbd>⌃</Kbd>
			</KbdGroup>
			<KbdGroup>
				<Kbd>Ctrl</Kbd>
				<span>+</span>
				<Kbd>B</Kbd>
			</KbdGroup>
		</div>
	)
}

'use client'

import { Kbd, KbdGroup } from '@nerdfish/react/kbd'

export default function KbdGroupExample() {
	return (
		<div className="flex flex-col items-center gap-4">
			<p className="text-foreground-muted text-sm">
				Use{' '}
				<KbdGroup>
					<Kbd>Ctrl + B</Kbd>
					<Kbd>Ctrl + K</Kbd>
				</KbdGroup>{' '}
				to open the command palette
			</p>
		</div>
	)
}

'use client'

import { Button } from '@nerdfish/react/button'
import { Kbd } from '@nerdfish/react/kbd'

export default function KbdButtonExample() {
	return (
		<div className="flex flex-wrap items-center gap-4">
			<Button variant="outline" size="sm" className="pr-3">
				Accept <Kbd>⏎</Kbd>
			</Button>
			<Button variant="outline" size="sm" className="pr-3">
				Cancel <Kbd>Esc</Kbd>
			</Button>
		</div>
	)
}