1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
| import { memo } from 'react'
| import { getKeyboardKeyNameBySystem } from './utils'
| import cn from '@/utils/classnames'
|
| type ShortcutsNameProps = {
| keys: string[]
| className?: string
| }
| const ShortcutsName = ({
| keys,
| className,
| }: ShortcutsNameProps) => {
| return (
| <div className={cn(
| 'flex items-center gap-0.5',
| className,
| )}>
| {
| keys.map(key => (
| <div
| key={key}
| className='system-kbd flex h-4 w-4 items-center justify-center rounded-[4px] bg-components-kbd-bg-gray capitalize'
| >
| {getKeyboardKeyNameBySystem(key)}
| </div>
| ))
| }
| </div>
| )
| }
|
| export default memo(ShortcutsName)
|
|
