✨ Add preferences to preferences page
This commit is contained in:
Manuel
@@ -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,
|
||||
|
||||
@@ -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 (
|
||||
<MainLayout>
|
||||
<Head>
|
||||
<title>Preferences • Homarr</title>
|
||||
</Head>
|
||||
<Title>Preferences</Title>
|
||||
<Title mb="xl">Preferences</Title>
|
||||
|
||||
<Stack spacing={5}>
|
||||
<Title order={2} size="lg">
|
||||
Localization
|
||||
</Title>
|
||||
|
||||
<Select
|
||||
label="Language"
|
||||
itemComponent={SelectItem}
|
||||
data={data}
|
||||
searchable
|
||||
maxDropdownHeight={400}
|
||||
filter={(value, item) =>
|
||||
item.label.toLowerCase().includes(value.toLowerCase().trim()) ||
|
||||
item.description.toLowerCase().includes(value.toLowerCase().trim())
|
||||
}
|
||||
withAsterisk
|
||||
/>
|
||||
|
||||
<Select
|
||||
label="First day of the week"
|
||||
data={[
|
||||
{ value: 'monday', label: 'Monday' },
|
||||
{ value: 'sunday', label: 'Sunday' },
|
||||
{ value: 'saturday', label: 'Saturday' },
|
||||
]}
|
||||
/>
|
||||
|
||||
<Title order={2} size="lg" mt="lg" mb="md">
|
||||
Accessibility
|
||||
</Title>
|
||||
|
||||
<AccessibilitySettings />
|
||||
</Stack>
|
||||
</MainLayout>
|
||||
);
|
||||
};
|
||||
|
||||
interface ItemProps extends React.ComponentPropsWithoutRef<'div'> {
|
||||
image: string;
|
||||
label: string;
|
||||
description: string;
|
||||
country: string;
|
||||
}
|
||||
|
||||
const SelectItem = forwardRef<HTMLDivElement, ItemProps>(
|
||||
({ image, label, description, country, ...others }: ItemProps, ref) => (
|
||||
<div ref={ref} {...others}>
|
||||
<Group noWrap>
|
||||
<span className={`fi fi-${country?.toLowerCase()}`}></span>
|
||||
|
||||
<div>
|
||||
<Text size="sm">{label}</Text>
|
||||
<Text size="xs" opacity={0.65}>
|
||||
{description}
|
||||
</Text>
|
||||
</div>
|
||||
</Group>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
|
||||
export default PreferencesPage;
|
||||
|
||||
@@ -4,11 +4,18 @@ export class Language {
|
||||
translatedName: string;
|
||||
emoji: string;
|
||||
|
||||
constructor(shortName: string, originalName: string, translatedName: string, emoji: string) {
|
||||
/**
|
||||
* The country identified b<y the ISO-3166 alpha 2 code:
|
||||
* https://www.iso.org/obp/ui/#search
|
||||
*/
|
||||
country?: string;
|
||||
|
||||
constructor(shortName: string, originalName: string, translatedName: string, emoji: string, country: string) {
|
||||
this.shortName = shortName;
|
||||
this.originalName = originalName;
|
||||
this.translatedName = translatedName;
|
||||
this.emoji = emoji;
|
||||
this.country = country;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -18,12 +25,14 @@ export const languages: Language[] = [
|
||||
originalName: 'Deutsch',
|
||||
translatedName: 'German',
|
||||
emoji: '🇩🇪',
|
||||
country: 'DE'
|
||||
},
|
||||
{
|
||||
shortName: 'en',
|
||||
originalName: 'English',
|
||||
translatedName: 'English',
|
||||
emoji: '🇬🇧',
|
||||
country: 'GB'
|
||||
},
|
||||
// Danish
|
||||
{
|
||||
@@ -31,6 +40,7 @@ export const languages: Language[] = [
|
||||
originalName: 'Dansk',
|
||||
translatedName: 'Danish',
|
||||
emoji: '🇩🇰',
|
||||
country: 'DK'
|
||||
},
|
||||
// Hebrew
|
||||
{
|
||||
@@ -38,36 +48,42 @@ export const languages: Language[] = [
|
||||
originalName: 'עברית',
|
||||
translatedName: 'Hebrew',
|
||||
emoji: '🇮🇱',
|
||||
country: 'IL'
|
||||
},
|
||||
{
|
||||
shortName: 'es',
|
||||
originalName: 'Español',
|
||||
translatedName: 'Spanish',
|
||||
emoji: '🇪🇸',
|
||||
country: 'ES'
|
||||
},
|
||||
{
|
||||
shortName: 'fr',
|
||||
originalName: 'Français',
|
||||
translatedName: 'French',
|
||||
emoji: '🇫🇷',
|
||||
country: 'FR'
|
||||
},
|
||||
{
|
||||
shortName: 'it',
|
||||
originalName: 'Italiano',
|
||||
translatedName: 'Italian',
|
||||
emoji: '🇮🇹',
|
||||
country: 'IT'
|
||||
},
|
||||
{
|
||||
shortName: 'ja',
|
||||
originalName: '日本語',
|
||||
translatedName: 'Japanese',
|
||||
emoji: '🇯🇵',
|
||||
country: 'JP'
|
||||
},
|
||||
{
|
||||
shortName: 'ko',
|
||||
originalName: '한국어',
|
||||
translatedName: 'Korean',
|
||||
emoji: '🇰🇷',
|
||||
country: 'KR'
|
||||
},
|
||||
{
|
||||
shortName: 'lol',
|
||||
@@ -81,6 +97,7 @@ export const languages: Language[] = [
|
||||
originalName: 'Norsk',
|
||||
translatedName: 'Norwegian',
|
||||
emoji: '🇳🇴',
|
||||
country: 'NO'
|
||||
},
|
||||
// Slovak
|
||||
{
|
||||
@@ -88,36 +105,42 @@ export const languages: Language[] = [
|
||||
originalName: 'Slovenčina',
|
||||
translatedName: 'Slovak',
|
||||
emoji: '🇸🇰',
|
||||
country: 'SK'
|
||||
},
|
||||
{
|
||||
shortName: 'nl',
|
||||
originalName: 'Nederlands',
|
||||
translatedName: 'Dutch',
|
||||
emoji: '🇳🇱',
|
||||
country: 'NL'
|
||||
},
|
||||
{
|
||||
shortName: 'pl',
|
||||
originalName: 'Polski',
|
||||
translatedName: 'Polish',
|
||||
emoji: '🇵🇱',
|
||||
country: 'PL'
|
||||
},
|
||||
{
|
||||
shortName: 'pt',
|
||||
originalName: 'Português',
|
||||
translatedName: 'Portuguese',
|
||||
emoji: '🇵🇹',
|
||||
country: 'PT'
|
||||
},
|
||||
{
|
||||
shortName: 'ru',
|
||||
originalName: 'Русский',
|
||||
translatedName: 'Russian',
|
||||
emoji: '🇷🇺',
|
||||
country: 'RU'
|
||||
},
|
||||
{
|
||||
shortName: 'sl',
|
||||
originalName: 'Slovenščina',
|
||||
translatedName: 'Slovenian',
|
||||
emoji: '🇸🇮',
|
||||
country: 'SI'
|
||||
},
|
||||
|
||||
{
|
||||
@@ -125,12 +148,14 @@ export const languages: Language[] = [
|
||||
originalName: 'Svenska',
|
||||
translatedName: 'Swedish',
|
||||
emoji: '🇸🇪',
|
||||
country: 'SE'
|
||||
},
|
||||
{
|
||||
shortName: 'uk',
|
||||
originalName: 'Українська',
|
||||
translatedName: 'Ukrainian',
|
||||
emoji: '🇺🇦',
|
||||
country: 'UA'
|
||||
},
|
||||
// Vietnamese
|
||||
{
|
||||
@@ -138,30 +163,35 @@ export const languages: Language[] = [
|
||||
originalName: 'Tiếng Việt',
|
||||
translatedName: 'Vietnamese',
|
||||
emoji: '🇻🇳',
|
||||
country: 'VN'
|
||||
},
|
||||
{
|
||||
shortName: 'zh',
|
||||
originalName: '中文',
|
||||
translatedName: 'Chinese',
|
||||
emoji: '🇨🇳',
|
||||
country: 'CN'
|
||||
},
|
||||
{
|
||||
shortName: 'el',
|
||||
originalName: 'Ελληνικά',
|
||||
translatedName: 'Greek',
|
||||
emoji: '🇬🇷',
|
||||
country: 'GR'
|
||||
},
|
||||
{
|
||||
shortName: 'tr',
|
||||
originalName: 'Türkçe',
|
||||
translatedName: 'Turkish',
|
||||
emoji: '🇹🇷',
|
||||
country: 'TR'
|
||||
},
|
||||
{
|
||||
shortName: 'lv',
|
||||
originalName: 'Latvian',
|
||||
translatedName: 'Latvian',
|
||||
emoji: '🇱🇻',
|
||||
country: 'LV'
|
||||
},
|
||||
// Croatian
|
||||
{
|
||||
@@ -169,6 +199,7 @@ export const languages: Language[] = [
|
||||
originalName: 'Hrvatski',
|
||||
translatedName: 'Croatian',
|
||||
emoji: '🇭🇷',
|
||||
country: 'HR'
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user