From d100d41ce6883cd517c63df52462b6a17630951e Mon Sep 17 00:00:00 2001 From: Manuel Date: Sun, 30 Jul 2023 16:22:45 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20preferences=20to=20preference?= =?UTF-8?q?s=20page?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + src/pages/_app.tsx | 1 + src/pages/manage/preferences.tsx | 72 +++++++++++++++++++++++++++++++- src/tools/language.ts | 33 ++++++++++++++- yarn.lock | 8 ++++ 5 files changed, 112 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 6391112b4..0b4afbf28 100644 --- a/package.json +++ b/package.json @@ -66,6 +66,7 @@ "dayjs": "^1.11.7", "dockerode": "^3.3.2", "fily-publish-gridstack": "^0.0.13", + "flag-icons": "^6.9.2", "framer-motion": "^10.0.0", "html-entities": "^2.3.3", "i18next": "^22.5.1", diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 57003c9a3..9d8d567ee 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -34,6 +34,7 @@ import { getServiceSidePackageAttributes, } from '../tools/server/getPackageVersion'; import { theme } from '../tools/server/theme/theme'; +import "/node_modules/flag-icons/css/flag-icons.min.css"; function App( this: any, diff --git a/src/pages/manage/preferences.tsx b/src/pages/manage/preferences.tsx index 1cdb307b0..946f59e29 100644 --- a/src/pages/manage/preferences.tsx +++ b/src/pages/manage/preferences.tsx @@ -1,16 +1,84 @@ -import { Title } from '@mantine/core'; +import { Group, Select, Stack, Text, Title } from '@mantine/core'; import Head from 'next/head'; +import { forwardRef } from 'react'; +import { AccessibilitySettings } from '~/components/Settings/Customization/Accessibility/AccessibilitySettings'; import { MainLayout } from '~/components/layout/admin/main-admin.layout'; +import { languages } from '~/tools/language'; const PreferencesPage = () => { + const data = 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, + })); return ( Preferences • Homarr - Preferences + Preferences + + + + Localization + + + + + + Accessibility + + + + ); }; +interface ItemProps extends React.ComponentPropsWithoutRef<'div'> { + image: string; + label: string; + description: string; + country: string; +} + +const SelectItem = forwardRef( + ({ image, label, description, country, ...others }: ItemProps, ref) => ( +
+ + + +
+ {label} + + {description} + +
+ +
+ ) +); + export default PreferencesPage; diff --git a/src/tools/language.ts b/src/tools/language.ts index 3f95f84b0..34c21a66e 100644 --- a/src/tools/language.ts +++ b/src/tools/language.ts @@ -4,11 +4,18 @@ export class Language { translatedName: string; emoji: string; - constructor(shortName: string, originalName: string, translatedName: string, emoji: string) { + /** + * The country identified b