✨ Add preferences to preferences page

2023-07-30 16:22:45 +02:00
parent 9de710bfd8
commit d100d41ce6
5 changed files with 112 additions and 3 deletions
--- 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,
--- 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 (
    <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;