🚧 Add board customization page

src/components/Board/Customize/PageMetadata/PageMetadataCustomization.tsx

@@ -0,0 +1,37 @@
+import { Stack, TextInput } from '@mantine/core';
+import { useTranslation } from 'next-i18next';
+
+import { useBoardCustomizationFormContext } from '../form';
+
+export const PageMetadataCustomization = () => {
+  const { t } = useTranslation('settings/customization/page-appearance');
+  const form = useBoardCustomizationFormContext();
+  return (
+    <Stack spacing="sm">
+      <TextInput
+        label={t('pageTitle.label')}
+        description={t('pageTitle.description')}
+        placeholder="homarr"
+        {...form.getInputProps('pageMetadata.pageTitle')}
+      />
+      <TextInput
+        label={t('metaTitle.label')}
+        description={t('metaTitle.description')}
+        placeholder="homarr - the best dashboard"
+        {...form.getInputProps('pageMetadata.metaTitle')}
+      />
+      <TextInput
+        label={t('logo.label')}
+        description={t('logo.description')}
+        placeholder="/imgs/logo/logo.png"
+        {...form.getInputProps('pageMetadata.logoSrc')}
+      />
+      <TextInput
+        label={t('favicon.label')}
+        description={t('favicon.description')}
+        placeholder="/imgs/favicon/favicon.svg"
+        {...form.getInputProps('pageMetadata.faviconSrc')}
+      />
+    </Stack>
+  );
+};