diff --git a/src/frontend/src/features/rooms/livekit/components/KeyboardShortcutHint.tsx b/src/frontend/src/features/rooms/livekit/components/KeyboardShortcutHint.tsx index b4502607..dbb39794 100644 --- a/src/frontend/src/features/rooms/livekit/components/KeyboardShortcutHint.tsx +++ b/src/frontend/src/features/rooms/livekit/components/KeyboardShortcutHint.tsx @@ -1,4 +1,4 @@ -import React, { ReactNode } from 'react' +import React from 'react' import { styled } from '@/styled-system/jsx' const Hint = styled('div', { @@ -25,15 +25,17 @@ const Hint = styled('div', { }) export interface KeyboardShortcutHintProps { - children: ReactNode + hint?: string } /** * Small reusable bubble used to display and announce keyboard shortcuts, * typically when an element receives keyboard focus. */ -export const KeyboardShortcutHint: React.FC = ({ - children, -}) => { - return {children} -} +export const KeyboardShortcutHint = React.memo( + ({ hint }: KeyboardShortcutHintProps) => { + return {hint} + } +) + +KeyboardShortcutHint.displayName = 'KeyboardShortcutHint' diff --git a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx index 66c2a0a4..f6e071da 100644 --- a/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx +++ b/src/frontend/src/features/rooms/livekit/components/ParticipantTile.tsx @@ -241,13 +241,13 @@ export const ParticipantTile: ( )} - - {t('toolbarHint', { + + /> ) })