component: kbd (#14)

Co-authored-by: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>

src/lib/components/ui/kbd/index.ts

@@ -0,0 +1,90 @@
+import { browser } from '$app/environment';
+import { type VariantProps, tv } from 'tailwind-variants';
+
+export { default as Kbd } from './kbd.svelte';
+
+export const kbd_variants = tv({
+	base: 'ml-1 inline-flex h-6 min-w-6 items-center justify-center gap-1 rounded bg-background-100 px-1.5 font-medium text-gray-1000 shadow-shadow-border',
+	variants: {
+		size: {
+			sm: '[&>span]:text-xs',
+			md: '[&>span]:text-sm'
+		}
+	},
+	defaultVariants: {
+		size: 'md'
+	}
+});
+
+type Size = VariantProps<typeof kbd_variants>['size'];
+
+export function is_mac_os() {
+	if (!browser) return false;
+	return navigator.userAgent.includes('Macintosh');
+}
+
+export const keys_map = {
+	meta: is_mac_os() ? '⌘' : 'Ctrl',
+	shift: is_mac_os() ? '⇧' : 'Shift',
+	option: is_mac_os() ? '⌥' : 'Alt',
+	control: is_mac_os() ? '⌃' : 'Ctrl',
+	delete: is_mac_os() ? '⌫' : 'Del',
+	return: is_mac_os() ? '⏎' : 'Enter',
+	enter: is_mac_os() ? '⏎' : 'Enter',
+	escape: is_mac_os() ? '⎋' : 'Esc',
+	left: '←',
+	up: '↑',
+	right: '→',
+	down: '↓',
+	home: is_mac_os() ? '⇱' : 'Home',
+	end: is_mac_os() ? '⇲' : 'End',
+	pageup: is_mac_os() ? '⇞' : 'PgUp',
+	pagedown: is_mac_os() ? '⇟' : 'PgDn',
+	'[': '[',
+	']': ']',
+	tab: 'tab',
+	a: 'a',
+	b: 'b',
+	c: 'c',
+	d: 'd',
+	e: 'e',
+	f: 'f',
+	g: 'g',
+	h: 'h',
+	i: 'i',
+	j: 'j',
+	k: 'k',
+	l: 'l',
+	m: 'm',
+	n: 'n',
+	o: 'o',
+	p: 'p',
+	q: 'q',
+	r: 'r',
+	s: 's',
+	t: 't',
+	u: 'u',
+	v: 'v',
+	w: 'w',
+	x: 'x',
+	y: 'y',
+	z: 'z',
+	0: '0',
+	1: '1',
+	2: '2',
+	3: '3',
+	4: '4',
+	5: '5',
+	6: '6',
+	7: '7',
+	8: '8',
+	9: '9',
+	space: is_mac_os() ? '␣' : 'Space',
+	'/': '/',
+	'\\': '\\'
+} as const;
+
+export type Props = {
+	size?: Size;
+	keys: (keyof typeof keys_map)[];
+};

src/lib/components/ui/kbd/kbd.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import { cn } from '$lib/utils.js';
+	import { type Props, kbd_variants, keys_map } from './index.js';
+
+	type $$Props = Props;
+
+	let class_name: string | undefined | null = undefined;
+	export let size: $$Props['size'] = 'md';
+	export let keys: (keyof typeof keys_map)[];
+	export { class_name as class };
+</script>
+
+<kbd class={cn(kbd_variants({ size, className: class_name }))} {...$$restProps}>
+	{#each keys as key, i}
+		<span>{keys_map[key]}</span>
+	{/each}
+</kbd>

src/lib/config/sitemap.ts

@@ -150,7 +150,7 @@ export const aside_items: Aside = {
 		{
 			title: 'Keyboard Input',
 			href: '/keyboard-input',
-			status: 'soon'
+			status: 'draft'
 		},
 		{
 			title: 'Loading Dots',

src/routes/keyboard-input/+page.svelte

@@ -1 +1,26 @@
-<h1>keyboard-input</h1>
+<script lang="ts">
+	import Demo from '$lib/components/shared/demo.svelte';
+	import PageWrapper from '$lib/components/shared/page-wrapper.svelte';
+	import Combination from './combination.svelte';
+	import combination_code from './combination.svelte?raw';
+	import Modifiers from './modifiers.svelte';
+	import modifiers_code from './modifiers.svelte?raw';
+	import Small from './small.svelte';
+	import small_code from './small.svelte?raw';
+
+	export let data;
+</script>
+
+<PageWrapper title={data.title} description={data.description}>
+	<Demo id="modifiers" code={modifiers_code}>
+		<Modifiers />
+	</Demo>
+
+	<Demo id="combination" code={combination_code}>
+		<Combination />
+	</Demo>
+
+	<Demo id="small" code={small_code}>
+		<Small />
+	</Demo>
+</PageWrapper>

src/routes/keyboard-input/+page.ts

@@ -0,0 +1,21 @@
+import type { MetaTagsProps } from 'svelte-meta-tags';
+
+export function load() {
+	const title = 'Keyboard Input';
+	const description = 'Display keyboard input that triggers an action.';
+
+	const pageMetaTags = Object.freeze({
+		title,
+		description,
+		openGraph: {
+			title,
+			description
+		}
+	}) satisfies MetaTagsProps;
+
+	return {
+		pageMetaTags,
+		title,
+		description
+	};
+}

src/routes/keyboard-input/combination.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { Kbd } from '$lib/components/ui/kbd';
+</script>
+
+<Kbd keys={['meta', 'shift']} />

src/routes/keyboard-input/modifiers.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+	import { Kbd } from '$lib/components/ui/kbd';
+</script>
+
+<Kbd keys={['meta']} />
+<Kbd keys={['shift']} />
+<Kbd keys={['option']} />
+<Kbd keys={['control']} />

src/routes/keyboard-input/small.svelte

@@ -0,0 +1,5 @@
+<script lang="ts">
+	import { Kbd } from '$lib/components/ui/kbd';
+</script>
+
+<Kbd keys={['/']} size="sm" />