From 714f906499237e20479d191bc434f652529b999d Mon Sep 17 00:00:00 2001
From: Jason Rasmussen <jason@rasm.me>
Date: Thu, 9 Jan 2025 11:05:09 -0500
Subject: [PATCH] feat: kbd component (#68)

---
 src/docs/constants.ts                         |  2 ++
 src/lib/components/Kbd/Kbd.svelte             | 33 +++++++++++++++++++
 src/lib/index.ts                              |  1 +
 src/routes/components/kbd/+page.svelte        | 17 ++++++++++
 src/routes/components/kbd/BasicExample.svelte |  9 +++++
 src/routes/components/kbd/SizeExample.svelte  | 11 +++++++
 6 files changed, 73 insertions(+)
 create mode 100644 src/lib/components/Kbd/Kbd.svelte
 create mode 100644 src/routes/components/kbd/+page.svelte
 create mode 100644 src/routes/components/kbd/BasicExample.svelte
 create mode 100644 src/routes/components/kbd/SizeExample.svelte

diff --git a/src/docs/constants.ts b/src/docs/constants.ts
index 1c78eb3..c238e71 100644
--- a/src/docs/constants.ts
+++ b/src/docs/constants.ts
@@ -16,6 +16,7 @@ import {
 	mdiHelpBoxOutline,
 	mdiHomeCircle,
 	mdiImage,
+	mdiKeyboardVariant,
 	mdiLink,
 	mdiListBoxOutline,
 	mdiMenu,
@@ -77,6 +78,7 @@ export const componentGroups = [
 		title: 'Text',
 		components: [
 			{ name: 'Code', icon: mdiCodeBraces },
+			{ name: 'Kbd', icon: mdiKeyboardVariant },
 			{ name: 'Text', icon: mdiFormatHeaderPound },
 			{ name: 'Heading', icon: mdiFormTextbox },
 			{ name: 'Link', icon: mdiLink },
diff --git a/src/lib/components/Kbd/Kbd.svelte b/src/lib/components/Kbd/Kbd.svelte
new file mode 100644
index 0000000..f07c8ba
--- /dev/null
+++ b/src/lib/components/Kbd/Kbd.svelte
@@ -0,0 +1,33 @@
+<script lang="ts">
+	import type { Color, Size } from '$lib/types.js';
+	import { cleanClass } from '$lib/utils.js';
+	import type { Snippet } from 'svelte';
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { tv } from 'tailwind-variants';
+
+	type Props = {
+		size?: Size;
+		color?: Color;
+		class?: string;
+		children?: Snippet;
+	} & HTMLAttributes<HTMLElement>;
+
+	const { class: className, size = 'small', children, ...restProps }: Props = $props();
+
+	const styles = tv({
+		base: 'flex flex-col rounded-md border border-b-2 bg-subtle px-1 font-mono text-dark shadow',
+		variants: {
+			size: {
+				tiny: 'text-xs',
+				small: 'text-sm',
+				medium: 'text-md',
+				large: 'text-lg',
+				giant: 'text-xl',
+			},
+		},
+	});
+</script>
+
+<kbd class={cleanClass(styles({ size }), className)} {...restProps}>
+	{@render children?.()}
+</kbd>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 38be846..a60c6e0 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -34,6 +34,7 @@ export { default as FormatBytes } from '$lib/components/FormatBytes/FormatBytes.
 export { default as Heading } from '$lib/components/Heading/Heading.svelte';
 export { default as Icon } from '$lib/components/Icon/Icon.svelte';
 export { default as IconButton } from '$lib/components/IconButton/IconButton.svelte';
+export { default as Kbd } from '$lib/components/Kbd/Kbd.svelte';
 export { default as Link } from '$lib/components/Link/Link.svelte';
 export { default as LoadingSpinner } from '$lib/components/LoadingSpinner/LoadingSpinner.svelte';
 export { default as Logo } from '$lib/components/Logo/Logo.svelte';
diff --git a/src/routes/components/kbd/+page.svelte b/src/routes/components/kbd/+page.svelte
new file mode 100644
index 0000000..20d8e30
--- /dev/null
+++ b/src/routes/components/kbd/+page.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+	import ComponentExamples from '$docs/components/ComponentExamples.svelte';
+	import ComponentPage from '$docs/components/ComponentPage.svelte';
+	import BasicExample from './BasicExample.svelte';
+	import basicExample from './BasicExample.svelte?raw';
+	import SizeExample from './SizeExample.svelte';
+	import sizeExample from './SizeExample.svelte?raw';
+</script>
+
+<ComponentPage name="Kbd">
+	<ComponentExamples
+		examples={[
+			{ title: 'Basic', code: basicExample, component: BasicExample },
+			{ title: 'Size', code: sizeExample, component: SizeExample },
+		]}
+	/>
+</ComponentPage>
diff --git a/src/routes/components/kbd/BasicExample.svelte b/src/routes/components/kbd/BasicExample.svelte
new file mode 100644
index 0000000..a812a80
--- /dev/null
+++ b/src/routes/components/kbd/BasicExample.svelte
@@ -0,0 +1,9 @@
+<script>
+	import { Kbd, Stack, Text } from '@immich/ui';
+</script>
+
+<Stack class="items-start">
+	<Kbd class="border-b-2">F12</Kbd>
+	<Kbd>SHIFT+TAB</Kbd>
+	<Text>Press <Kbd size="small">CTRL+c</Kbd> to copy highlighted text. it.</Text>
+</Stack>
diff --git a/src/routes/components/kbd/SizeExample.svelte b/src/routes/components/kbd/SizeExample.svelte
new file mode 100644
index 0000000..2367458
--- /dev/null
+++ b/src/routes/components/kbd/SizeExample.svelte
@@ -0,0 +1,11 @@
+<script lang="ts">
+	import { Kbd, Stack } from '@immich/ui';
+</script>
+
+<Stack class="items-start">
+	<Kbd size="tiny">SHIFT+TAB</Kbd>
+	<Kbd size="small">SHIFT+TAB</Kbd>
+	<Kbd size="medium">SHIFT+TAB</Kbd>
+	<Kbd size="large">SHIFT+TAB</Kbd>
+	<Kbd size="giant">SHIFT+TAB</Kbd>
+</Stack>