✨ Add Kbd component

Author: Frontendland

README.md

@@ -58,7 +58,7 @@ Webcore components use Sass for styling. To use the component library, you must
 Depending on your project setup, you'll also need the following packages:
 
 - **For Astro projects**
-    - [Astro](https://www.npmjs.com/package/astro) - `v4.10` and above
+    - [Astro](https://www.npmjs.com/package/astro) - `v4.15` and above
 - **For Svelte projects**
     - [Svelte](https://www.npmjs.com/package/svelte) - `v4.2` and above
 - **For React projects**
@@ -221,6 +221,7 @@ import { Accordion } from 'webcoreui/react'
 - [Group](https://github.com/Frontendland/webcoreui/tree/main/src/components/Group)
 - [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/components/Icon)
 - [Input](https://github.com/Frontendland/webcoreui/tree/main/src/components/Input)
+- [Kbd](https://github.com/Frontendland/webcoreui/tree/main/src/components/Kbd)
 - [List](https://github.com/Frontendland/webcoreui/tree/main/src/components/List)
 - [Masonry](https://github.com/Frontendland/webcoreui/tree/main/src/components/Masonry)
 - [Menu](https://github.com/Frontendland/webcoreui/tree/main/src/components/Menu)

src/components/Kbd/Kbd.astro

@@ -0,0 +1,20 @@
+---
+import type { KbdProps } from './kbd'
+import { keyMap } from './keyMap'
+
+import styles from './kbd.module.scss'
+
+interface Props extends KbdProps {}
+
+const {
+    keys,
+    className
+} = Astro.props
+
+const classes = [
+    styles.kbd,
+    className
+]
+---
+
+<kbd class:list={classes}>{keys?.map(key => keyMap[key])}<slot /></kbd>

src/components/Kbd/Kbd.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { KbdProps } from './kbd'
+    import { keyMap } from './keyMap'
+
+    import { classNames } from '../../utils/classNames'
+
+    import styles from './kbd.module.scss'
+
+    export let keys: KbdProps['keys'] = []
+    export let className: KbdProps['className'] = ''
+
+    const classes = classNames([
+        styles.kbd,
+        className
+    ])
+</script>
+
+<kbd class={classes}>{keys?.map(key => keyMap[key]).join('')}<slot /></kbd>

src/components/Kbd/Kbd.tsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import type { ReactKbdProps } from './kbd'
+import { keyMap } from './keyMap'
+
+import { classNames } from '../../utils/classNames'
+
+import styles from './kbd.module.scss'
+
+const Kbd = ({
+    keys,
+    className,
+    children
+}: ReactKbdProps) => {
+    const classes = classNames([
+        styles.kbd,
+        className
+    ])
+
+    return (
+        <kbd className={classes}>
+            {keys?.map(key => keyMap[key]).join('')}
+            {children}
+        </kbd>
+    )
+}
+
+export default Kbd

src/components/Kbd/kbd.module.scss

@@ -0,0 +1,8 @@
+@import '../../scss/config.scss';
+
+.kbd {
+    @include background(primary-50);
+    @include border-radius(md);
+    @include typography(md, regular);
+    @include spacing(py-xs, px-xs);
+}

src/components/Kbd/kbd.ts

@@ -0,0 +1,26 @@
+export type KbdProps = {
+    keys?: ('cmd'
+        | 'shift'
+        | 'ctrl'
+        | 'option'
+        | 'enter'
+        | 'del'
+        | 'esc'
+        | 'tab'
+        | 'capslock'
+        | 'up'
+        | 'down'
+        | 'left'
+        | 'right'
+        | 'pageup'
+        | 'pagedown'
+        | 'home'
+        | 'end'
+        | 'help'
+        | 'space')[]
+    className?: string
+}
+
+export type ReactKbdProps = {
+    children?: React.ReactNode
+} & KbdProps

src/components/Kbd/keyMap.ts

@@ -0,0 +1,21 @@
+export const keyMap = {
+    cmd: '⌘',
+    shift: '⇧',
+    ctrl: '⌃',
+    option: '⌥',
+    enter: '↵',
+    del: '⌫',
+    esc: '⎋',
+    tab: '⇥',
+    capslock: '⇪',
+    up: '↑',
+    down: '↓',
+    left: '←',
+    right: '→',
+    pageup: '⇞',
+    pagedown: '⇟',
+    home: '↖',
+    end: '↘',
+    help: '?',
+    space: '␣'
+}

src/pages/components/kbd.astro

@@ -0,0 +1,54 @@
+---
+import ComponentWrapper from '@static/ComponentWrapper.astro'
+import Layout from '@static/Layout.astro'
+
+import AstroKbd from '@components/Kbd/Kbd.astro'
+import SvelteKbd from '@components/Kbd/Kbd.svelte'
+import ReactKbd from '@components/Kbd/Kbd.tsx'
+import { keyMap } from '@components/Kbd/keyMap'
+
+import { getSections } from '@helpers'
+
+const sections = getSections({
+    title: 'kbds',
+    components: [AstroKbd, SvelteKbd, ReactKbd]
+})
+---
+
+<Layout>
+    <h1>Kbd</h1>
+    <div class="grid md-2 lg-3">
+        <ComponentWrapper type="Astro">
+            <AstroKbd keys={['cmd', 'shift']}>A</AstroKbd>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="Svelte">
+            <SvelteKbd keys={['ctrl', 'space']}>S</SvelteKbd>
+        </ComponentWrapper>
+
+        <ComponentWrapper type="React">
+            <ReactKbd keys={['up', 'down']}>R</ReactKbd>
+        </ComponentWrapper>
+    </div>
+
+    {sections.map(section => (
+        <h1>{section.title}</h1>
+        <Fragment>
+            {section.subTitle && <h2 set:html={section.subTitle} />}
+        </Fragment>
+        <div class="grid md-2 lg-3">
+            <ComponentWrapper title="No key">
+                <section.component>N</section.component>
+                <section.component keys={['capslock']} />
+            </ComponentWrapper>
+
+            <ComponentWrapper title="One key">
+                <section.component keys={['cmd']}>O</section.component>
+            </ComponentWrapper>
+
+            <ComponentWrapper title="All keys"s>
+                <section.component keys={Object.keys(keyMap)}>All</section.component>
+            </ComponentWrapper>
+        </div>
+    ))}
+</Layout>

src/pages/index.astro

@@ -20,6 +20,7 @@ import Footer from '@components/Footer/Footer.astro'
 import Group from '@components/Group/Group.astro'
 import Icon from '@components/Icon/Icon.astro'
 import Input from '@components/Input/Input.astro'
+import Kbd from '@components/Kbd/Kbd.astro'
 import List from '@components/List/List.astro'
 import Masonry from '@components/Masonry/Masonry.astro'
 import Menu from '@components/Menu/Menu.astro'
@@ -203,6 +204,9 @@ const tabItems = [{
         <CardWrapper title="Input" href="/components/input">
             <Input placeholder="Please enter your email." />
         </CardWrapper>
+        <CardWrapper title="Kbd" href="/components/kbd">
+            <Kbd keys={['cmd', 'shift']}>K</Kbd>
+        </CardWrapper>
         <CardWrapper title="List" href="/components/list">
             <List
                 itemGroups={listPreview}