♻️ Improve customization page

This commit is contained in:
Meier Lukas
2023-08-04 21:54:33 +02:00
parent 02227e0a44
commit 863cff1dfc

View File

@@ -1,4 +1,4 @@
import { Stack, TextInput } from '@mantine/core'; import { Grid, Stack, TextInput } from '@mantine/core';
import { useTranslation } from 'next-i18next'; import { useTranslation } from 'next-i18next';
import { useBoardCustomizationFormContext } from '../form'; import { useBoardCustomizationFormContext } from '../form';
@@ -7,31 +7,39 @@ export const PageMetadataCustomization = () => {
const { t } = useTranslation('settings/customization/page-appearance'); const { t } = useTranslation('settings/customization/page-appearance');
const form = useBoardCustomizationFormContext(); const form = useBoardCustomizationFormContext();
return ( return (
<Stack spacing="sm"> <Grid gutter="md" align="stretch">
<TextInput <Grid.Col span={12} sm={6}>
label={t('pageTitle.label')} <TextInput
description={t('pageTitle.description')} label={t('pageTitle.label')}
placeholder="homarr" description={t('pageTitle.description')}
{...form.getInputProps('pageMetadata.pageTitle')} placeholder="homarr"
/> {...form.getInputProps('pageMetadata.pageTitle')}
<TextInput />
label={t('metaTitle.label')} </Grid.Col>
description={t('metaTitle.description')} <Grid.Col span={12} sm={6}>
placeholder="homarr - the best dashboard" <TextInput
{...form.getInputProps('pageMetadata.metaTitle')} label={t('metaTitle.label')}
/> description={t('metaTitle.description')}
<TextInput placeholder="homarr - the best dashboard"
label={t('logo.label')} {...form.getInputProps('pageMetadata.metaTitle')}
description={t('logo.description')} />
placeholder="/imgs/logo/logo.png" </Grid.Col>
{...form.getInputProps('pageMetadata.logoSrc')} <Grid.Col span={12} sm={6}>
/> <TextInput
<TextInput label={t('logo.label')}
label={t('favicon.label')} description={t('logo.description')}
description={t('favicon.description')} placeholder="/imgs/logo/logo.png"
placeholder="/imgs/favicon/favicon.svg" {...form.getInputProps('pageMetadata.logoSrc')}
{...form.getInputProps('pageMetadata.faviconSrc')} />
/> </Grid.Col>
</Stack> <Grid.Col span={12} sm={6}>
<TextInput
label={t('favicon.label')}
description={t('favicon.description')}
placeholder="/imgs/favicon/favicon.svg"
{...form.getInputProps('pageMetadata.faviconSrc')}
/>
</Grid.Col>
</Grid>
); );
}; };