dify/web/app/components/workflow/shortcuts-name.tsx
Joel 7709d9df20
Chore: frontend infrastructure upgrade (#16420)
Co-authored-by: NFish <douxc512@gmail.com>
Co-authored-by: zxhlyh <jasonapring2015@outlook.com>
Co-authored-by: twwu <twwu@dify.ai>
Co-authored-by: jZonG <jzongcode@gmail.com>
2025-03-21 17:41:03 +08:00

33 lines
701 B
TypeScript

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)