diff --git a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx index 0fb6dc40..f3ab8910 100644 --- a/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx +++ b/src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenu.tsx @@ -4,12 +4,14 @@ import { RiQuestionLine, RiSettings3Line, } from '@remixicon/react' +import { useState } from 'react' import { styled } from '@/styled-system/jsx' import { Menu as RACMenu, MenuItem as RACMenuItem, Popover as RACPopover, } from 'react-aria-components' +import { SettingsDialog } from '@/features/settings' // Styled components to be refactored const StyledMenu = styled(RACMenu, { @@ -60,29 +62,35 @@ const StyledPopover = styled(RACPopover, { export const OptionsMenu = () => { const { t } = useTranslation('rooms') - + const [isSettingsDialogOpen, setIsSettingsDialogOpen] = useState(false) return ( - - - - - {t('options.items.support')} - - - - {t('options.items.feedbacks')} - - alert('delete')}> - - {t('options.items.settings')} - - - + <> + + + + + {t('options.items.support')} + + + + {t('options.items.feedbacks')} + + setIsSettingsDialogOpen(true)}> + + {t('options.items.settings')} + + + + setIsSettingsDialogOpen(v)} + /> + ) } diff --git a/src/frontend/src/features/settings/components/SettingsDialog.tsx b/src/frontend/src/features/settings/components/SettingsDialog.tsx index 69a65182..ea4aabfa 100644 --- a/src/frontend/src/features/settings/components/SettingsDialog.tsx +++ b/src/frontend/src/features/settings/components/SettingsDialog.tsx @@ -1,12 +1,14 @@ import { useTranslation } from 'react-i18next' import { useLanguageLabels } from '@/i18n/useLanguageLabels' -import { Dialog, Field, H } from '@/primitives' +import { Dialog, type DialogProps, Field, H } from '@/primitives' -export const SettingsDialog = () => { +export type SettingsDialogProps = Pick + +export const SettingsDialog = (props: SettingsDialogProps) => { const { t, i18n } = useTranslation('settings') const { languagesList, currentLanguage } = useLanguageLabels() return ( - + {t('language.heading')}