mirror of
https://github.com/suitenumerique/meet.git
synced 2026-08-24 08:56:28 +00:00
lebaudantoine
9f5e69a35a
Reorganize all components related to the participant tile into a dedicated feature folder, so the code organization is clearer and related components are grouped together.
42 lines
1021 B
TypeScript
42 lines
1021 B
TypeScript
import React from 'react'
|
|
import { styled } from '@/styled-system/jsx'
|
|
|
|
const Hint = styled('div', {
|
|
base: {
|
|
position: 'absolute',
|
|
top: '0.75rem',
|
|
right: '0.75rem',
|
|
backgroundColor: 'rgba(0,0,0,0.5)',
|
|
color: 'white',
|
|
borderRadius: 'calc(var(--lk-border-radius) / 2)',
|
|
paddingInline: '0.5rem',
|
|
paddingBlock: '0.1rem',
|
|
fontSize: '0.875rem',
|
|
opacity: 0,
|
|
visibility: 'hidden',
|
|
pointerEvents: 'none',
|
|
transition: 'opacity 150ms ease',
|
|
'.lk-grid-layout > *:first-child:focus-within &': {
|
|
opacity: 1,
|
|
visibility: 'visible',
|
|
pointerEvents: 'auto',
|
|
},
|
|
},
|
|
})
|
|
|
|
export interface KeyboardShortcutHintProps {
|
|
hint?: string
|
|
}
|
|
|
|
/**
|
|
* Small reusable bubble used to display and announce keyboard shortcuts,
|
|
* typically when an element receives keyboard focus.
|
|
*/
|
|
export const KeyboardShortcutHint = React.memo(
|
|
({ hint }: KeyboardShortcutHintProps) => {
|
|
return <Hint>{hint}</Hint>
|
|
}
|
|
)
|
|
|
|
KeyboardShortcutHint.displayName = 'KeyboardShortcutHint'
|