mirror of
https://github.com/suitenumerique/meet.git
synced 2026-08-25 01:37:30 +00:00
Cyril
35 lines
719 B
TypeScript
35 lines
719 B
TypeScript
import React from 'react'
|
|
import { css, cx } from '@/styled-system/css'
|
|
|
|
type ShortcutBadgeProps = {
|
|
visualLabel: string
|
|
srLabel?: string
|
|
className?: string
|
|
}
|
|
|
|
const badgeStyle = css({
|
|
fontFamily: 'monospace',
|
|
backgroundColor: 'rgba(255,255,255,0.12)',
|
|
paddingInline: '0.4rem',
|
|
paddingBlock: '0.2rem',
|
|
borderRadius: '6px',
|
|
whiteSpace: 'nowrap',
|
|
minWidth: '5.5rem',
|
|
textAlign: 'center',
|
|
})
|
|
|
|
export const ShortcutBadge: React.FC<ShortcutBadgeProps> = ({
|
|
visualLabel,
|
|
srLabel,
|
|
className,
|
|
}) => {
|
|
return (
|
|
<>
|
|
<kbd className={cx(badgeStyle, className)} aria-hidden="true">
|
|
{visualLabel}
|
|
</kbd>
|
|
{srLabel && <span className="sr-only">{srLabel}</span>}
|
|
</>
|
|
)
|
|
}
|