116 lines
4.1 KiB
JavaScript
116 lines
4.1 KiB
JavaScript
import React from 'react'
|
|
import { Menu } from '@headlessui/react'
|
|
import { MdOutlineCheckBox, MdOutlineCheckBoxOutlineBlank, MdOutlineLightMode, MdDarkMode } from 'react-icons/md'
|
|
import { TbColorPicker, TbLanguage } from 'react-icons/tb'
|
|
|
|
const UserOptionsMenu = ({ setPreferences, theme, i18n }) => {
|
|
return (
|
|
<>
|
|
<div className="flex items-center justify-center text-gray-900 dark:text-white">
|
|
<TbColorPicker className="mr-2 size-5" aria-hidden="true" />
|
|
{i18n.t('common.theme') || 'Tema'}
|
|
</div>
|
|
<div className="mb-2 grid grid-cols-2 gap-2 p-1">
|
|
<Menu.Item>
|
|
<button
|
|
className={`${
|
|
theme === 'light'
|
|
? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
|
|
: 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
|
|
} group flex w-full items-center rounded-md p-2 text-sm`}
|
|
onClick={async () => {
|
|
setPreferences('light')
|
|
}}
|
|
>
|
|
<MdOutlineLightMode className="mr-2 size-5" aria-hidden="true" />
|
|
{i18n.t('common.themeLight') || 'Claro'}
|
|
</button>
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
<button
|
|
className={`${
|
|
theme === 'dark'
|
|
? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
|
|
: 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
|
|
} group flex w-full items-center rounded-md p-2 text-sm`}
|
|
onClick={() => {
|
|
setPreferences('dark')
|
|
}}
|
|
>
|
|
<MdDarkMode className="mr-2 size-5" aria-hidden="true" />
|
|
{i18n.t('common.themeDark') || 'Oscuro'}
|
|
</button>
|
|
</Menu.Item>
|
|
</div>
|
|
|
|
<div className="flex items-center justify-center text-gray-900 dark:text-white">
|
|
<TbLanguage className="mr-2 size-5" aria-hidden="true" />
|
|
{i18n.t('common.language') || 'Idioma'}
|
|
</div>
|
|
|
|
<div className="mb-2 grid grid-cols-2 gap-2 p-1">
|
|
<Menu.Item>
|
|
<button
|
|
className={`${
|
|
i18n.activeLocale === 'es'
|
|
? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
|
|
: 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
|
|
} group flex w-full items-center rounded-md p-2 text-sm`}
|
|
onClick={async () => {
|
|
setPreferences('es')
|
|
}}
|
|
>
|
|
{
|
|
i18n.activeLocale === 'es'
|
|
? (
|
|
<MdOutlineCheckBox
|
|
className="mr-2 size-5"
|
|
aria-hidden="true"
|
|
/>
|
|
)
|
|
: (
|
|
<MdOutlineCheckBoxOutlineBlank
|
|
className="mr-2 size-5"
|
|
aria-hidden="true"
|
|
/>
|
|
)
|
|
}
|
|
{i18n.t('common.languageSpanish') || 'Español'}
|
|
</button>
|
|
</Menu.Item>
|
|
<Menu.Item>
|
|
<button
|
|
className={`${
|
|
i18n.activeLocale === 'en'
|
|
? 'bg-theme-app-500 text-white dark:bg-theme-app-500'
|
|
: 'bg-theme-app-50 text-gray-900 transition-colors duration-350 ease-in-out hover:bg-theme-app-100'
|
|
} group flex w-full items-center rounded-md p-2 text-sm`}
|
|
onClick={() => {
|
|
setPreferences('en')
|
|
}}
|
|
>
|
|
{
|
|
i18n.activeLocale === 'en'
|
|
? (
|
|
<MdOutlineCheckBox
|
|
className="mr-2 size-5"
|
|
aria-hidden="true"
|
|
/>
|
|
)
|
|
: (
|
|
<MdOutlineCheckBoxOutlineBlank
|
|
className='mr-2 size-5'
|
|
aria-hidden='true'
|
|
/>
|
|
)
|
|
}
|
|
{i18n.t('common.languageEnglish') || 'Inglés'}
|
|
</button>
|
|
</Menu.Item>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default UserOptionsMenu
|