feat: add kbd component and page

mdsvex.config.js

@@ -18,6 +18,7 @@ const config = defineConfig({
 		footerLayout: './src/routes/layouts/footerLayout.svelte',
 		formLayout: './src/routes/layouts/formLayout.svelte',
 		iconLayout: './src/routes/layouts/iconLayout.svelte',
+		kbdLayout: './src/routes/layouts/kbdLayout.svelte',
 		listgroupLayout: './src/routes/layouts/listgroupLayout.svelte',
 		modalLayout: './src/routes/layouts/modalLayout.svelte',
 		navbarLayout: './src/routes/layouts/navbarLayout.svelte',

src/lib/index.ts

@@ -70,6 +70,13 @@ export { default as Select } from './forms/Select.svelte';
 export { default as Textarea } from './forms/Textarea.svelte';
 export { default as Toggle } from './forms/Toggle.svelte';
 
+// Kbd
+export { default as Kbd } from './kbd/Kbd.svelte';
+export { default as ArrowKeyDown } from './kbd/ArrowKeyDown.svelte';
+export { default as ArrowKeyLeft } from './kbd/ArrowKeyLeft.svelte';
+export { default as ArrowKeyRight } from './kbd/ArrowKeyRight.svelte';
+export { default as ArrowKeyUp } from './kbd/ArrowKeyUp.svelte';
+
 // List
 export { default as List } from './list-group/List.svelte';
 

src/lib/kbd/ArrowKeyDown.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	export let svgClass: string = 'w-4 h-4';
+</script>
+
+<svg
+	{...$$restProps}
+	class={classNames(svgClass, $$props.class)}
+	aria-hidden="true"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 320 512"
+	><path
+		d="M310.6 246.6l-127.1 128C176.4 380.9 168.2 384 160 384s-16.38-3.125-22.63-9.375l-127.1-128C.2244 237.5-2.516 223.7 2.438 211.8S19.07 192 32 192h255.1c12.94 0 24.62 7.781 29.58 19.75S319.8 237.5 310.6 246.6z"
+	/></svg
+>

src/lib/kbd/ArrowKeyLeft.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	export let svgClass: string = 'w-4 h-4';
+</script>
+
+<svg
+	{...$$restProps}
+	class={classNames(svgClass, $$props.class)}
+	aria-hidden="true"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 320 512"
+	><path
+		d="M137.4 406.6l-128-127.1C3.125 272.4 0 264.2 0 255.1s3.125-16.38 9.375-22.63l128-127.1c9.156-9.156 22.91-11.9 34.88-6.943S192 115.1 192 128v255.1c0 12.94-7.781 24.62-19.75 29.58S146.5 415.8 137.4 406.6z"
+	/></svg
+>

src/lib/kbd/ArrowKeyRight.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	export let svgClass: string = 'w-4 h-4';
+</script>
+
+<svg
+	{...$$restProps}
+	class={classNames(svgClass, $$props.class)}
+	aria-hidden="true"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 320 512"
+	><path
+		d="M118.6 105.4l128 127.1C252.9 239.6 256 247.8 256 255.1s-3.125 16.38-9.375 22.63l-128 127.1c-9.156 9.156-22.91 11.9-34.88 6.943S64 396.9 64 383.1V128c0-12.94 7.781-24.62 19.75-29.58S109.5 96.23 118.6 105.4z"
+	/></svg
+>

src/lib/kbd/ArrowKeyUp.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	export let svgClass: string = 'w-4 h-4';
+</script>
+
+<svg
+	{...$$restProps}
+	class={classNames(svgClass, $$props.class)}
+	aria-hidden="true"
+	fill="currentColor"
+	xmlns="http://www.w3.org/2000/svg"
+	viewBox="0 0 320 512"
+	><path
+		d="M9.39 265.4l127.1-128C143.6 131.1 151.8 128 160 128s16.38 3.125 22.63 9.375l127.1 128c9.156 9.156 11.9 22.91 6.943 34.88S300.9 320 287.1 320H32.01c-12.94 0-24.62-7.781-29.58-19.75S.2333 274.5 9.39 265.4z"
+	/></svg
+>

src/lib/kbd/Kbd.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import classNames from 'classnames';
+	export let kbdClass: string =
+		'text-xs font-semibold text-gray-800 bg-gray-100 border border-gray-200 rounded-lg dark:bg-gray-600 dark:text-gray-100 dark:border-gray-500';
+</script>
+
+<kbd class={classNames(kbdClass, $$props.class)}>
+	<slot />
+</kbd>

src/routes/__layout.svelte

@@ -175,6 +175,11 @@
 				<a href="/icons">Icons</a>
 			</h3>
 		</Nav>
+		<Nav {navClass} {navDivClass}>
+			<h3 class={h3Class}>
+				<a href="/kbd">KBD</a>
+			</h3>
+		</Nav>
 		<Nav {navClass} {navDivClass}>
 			<h3 class={h3Class}>
 				<a href="/list-group">List group</a>

src/routes/blocks/KbdBlock.svelte

@@ -0,0 +1,54 @@
+<a
+	href="/kbd/"
+	class="h-64 bg-white rounded-lg border border-gray-100 hover:border-white dark:border-gray-700 dark:hover:border-gray-600 hover:shadow-lg dark:hover:shadow-lg-light dark:bg-gray-900"
+	><div
+		class="bg-gray-50 dark:bg-gray-700 rounded-t-md py-2.5 px-5 flex justify-between items-center border-b border-gray-200 dark:border-gray-700"
+	>
+		<span class="text-lg font-medium text-gray-500 dark:text-gray-400">KBD (Keyboard)</span><span
+			class="text-gray-900 dark:text-white"
+			><svg
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				stroke-width="2"
+				stroke="currentColor"
+				aria-hidden="true"
+				class="w-5 h-5"
+				><path
+					stroke-linecap="round"
+					stroke-linejoin="round"
+					d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"
+				/></svg
+			></span
+		>
+	</div>
+	<div class="flex justify-center items-center h-52">
+		<div class="relative h-4/6 dark:hidden w-40">
+			<span
+				style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;"
+				><img
+					alt="KBD (Keyboard)"
+					src="/images/components/keyboard.svg"
+					decoding="async"
+					data-nimg="fill"
+					style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: contain;"
+					sizes="100vw"
+					srcset="/images/components/keyboard.svg 640w, /images/components/keyboard.svg 750w, /images/components/keyboard.svg 828w, /images/components/keyboard.svg 1080w, /images/components/keyboard.svg 1200w, /images/components/keyboard.svg 1920w, /images/components/keyboard.svg 2048w, /images/components/keyboard.svg 3840w"
+				/><noscript /></span
+			>
+		</div>
+		<div class="hidden relative h-4/6 dark:block w-40">
+			<span
+				style="box-sizing: border-box; display: block; overflow: hidden; width: initial; height: initial; background: none; opacity: 1; border: 0px; margin: 0px; padding: 0px; position: absolute; inset: 0px;"
+				><img
+					alt="KBD (Keyboard)"
+					src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+					decoding="async"
+					data-nimg="fill"
+					class="w-40"
+					style="position: absolute; inset: 0px; box-sizing: border-box; padding: 0px; border: none; margin: auto; display: block; width: 0px; height: 0px; min-width: 100%; max-width: 100%; min-height: 100%; max-height: 100%; object-fit: contain;"
+				/><noscript /></span
+			>
+		</div>
+	</div></a
+>

src/routes/blocks/index.ts

@@ -14,6 +14,7 @@ export { default as FloatingLabelBlock } from './FloatingLabelBlock.svelte'
 export { default as FooterBlock } from './FooterBlock.svelte'
 export { default as FormBlock } from './FormBlock.svelte'
 export { default as InputfieldBlock } from './InputfieldBlock.svelte'
+export { default as KbdBlock } from './KbdBlock.svelte'
 export { default as ListgroupBlock } from './ListgroupBlock.svelte'
 export { default as ModalBlock } from './ModalBlock.svelte'
 export { default as NavbarBlock } from './NavbarBlock.svelte'

src/routes/index.svelte

@@ -19,6 +19,7 @@
 		FooterBlock,
 		FormBlock,
 		InputfieldBlock,
+		KbdBlock,
 		ListgroupBlock,
 		ModalBlock,
 		NavbarBlock,
@@ -94,6 +95,7 @@
 	<FooterBlock />
 	<FormBlock />
 	<InputfieldBlock />
+	<KbdBlock />
 	<ListgroupBlock />
 	<ModalBlock />
 	<NavbarBlock />