2023-07-30 16:22:45 +02:00
|
|
|
import { Group, Select, Stack, Text, Title } from '@mantine/core';
|
2023-07-30 15:33:43 +02:00
|
|
|
import Head from 'next/head';
|
2023-07-30 16:22:45 +02:00
|
|
|
import { forwardRef } from 'react';
|
|
|
|
|
import { AccessibilitySettings } from '~/components/Settings/Customization/Accessibility/AccessibilitySettings';
|
2023-07-30 15:33:43 +02:00
|
|
|
import { MainLayout } from '~/components/layout/admin/main-admin.layout';
|
2023-07-30 16:22:45 +02:00
|
|
|
import { languages } from '~/tools/language';
|
2023-07-29 14:49:44 +02:00
|
|
|
|
2023-07-29 14:59:11 +02:00
|
|
|
const PreferencesPage = () => {
|
2023-07-30 16:22:45 +02:00
|
|
|
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,
|
|
|
|
|
}));
|
2023-07-30 15:33:43 +02:00
|
|
|
return (
|
|
|
|
|
<MainLayout>
|
|
|
|
|
<Head>
|
|
|
|
|
<title>Preferences • Homarr</title>
|
|
|
|
|
</Head>
|
2023-07-30 16:22:45 +02:00
|
|
|
<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>
|
2023-07-30 15:33:43 +02:00
|
|
|
</MainLayout>
|
|
|
|
|
);
|
|
|
|
|
};
|
2023-07-29 14:49:44 +02:00
|
|
|
|
2023-07-30 16:22:45 +02:00
|
|
|
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>
|
|
|
|
|
)
|
|
|
|
|
);
|
|
|
|
|
|
2023-07-30 15:33:43 +02:00
|
|
|
export default PreferencesPage;
|
