import { Button, Group, Select, Stack, Text, Title } from '@mantine/core'; import { createFormContext } from '@mantine/form'; import type { InferGetServerSidePropsType } from 'next'; import { GetServerSidePropsContext } from 'next'; import Head from 'next/head'; import { forwardRef } from 'react'; import { useTranslation } from 'react-i18next'; import { z } from 'zod'; import { AccessibilitySettings } from '~/components/User/Preferences/AccessibilitySettings'; import { ManageLayout } from '~/components/layout/Templates/ManageLayout'; import { languages } from '~/tools/language'; import { getServerSideTranslations } from '~/tools/server/getServerSideTranslations'; import { manageNamespaces } from '~/tools/server/translation-namespaces'; import { RouterOutputs, api } from '~/utils/api'; import { useI18nZodResolver } from '~/utils/i18n-zod-resolver'; import { updateSettingsValidationSchema } from '~/validations/user'; const PreferencesPage = ({ locale }: InferGetServerSidePropsType) => { const { data } = api.user.withSettings.useQuery(); const { data: boardsData } = api.boards.all.useQuery(); return ( Preferences • Homarr Preferences {data && boardsData && } ); }; export const [FormProvider, useFormContext, useForm] = createFormContext>(); const SettingsComponent = ({ settings, boardsData, }: { settings: RouterOutputs['user']['withSettings']['settings']; boardsData: RouterOutputs['boards']['all']; }) => { const languagesData = languages.map((language) => ({ image: 'https://img.icons8.com/clouds/256/000000/futurama-bender.png', label: language.originalName, description: language.translatedName, value: language.shortName, country: language.country, })); const { t } = useTranslation('user/preferences'); const { i18nZodResolver } = useI18nZodResolver(); const form = useForm({ initialValues: { disablePingPulse: settings.disablePingPulse, replaceDotsWithIcons: settings.replacePingWithIcons, language: settings.language, defaultBoard: settings.defaultBoard, }, validate: i18nZodResolver(updateSettingsValidationSchema), validateInputOnBlur: true, validateInputOnChange: true, }); const { mutate } = api.user.updateSettings.useMutation(); const handleSubmit = () => { mutate(form.values); }; return (
{t('boards.title')} item.label!.toLowerCase().includes(value.toLowerCase().trim()) || item.description.toLowerCase().includes(value.toLowerCase().trim()) } defaultValue={settings.language} withAsterisk mb="xs" {...form.getInputProps('language')} />