95 lines
2.8 KiB
TypeScript
Executable File
95 lines
2.8 KiB
TypeScript
Executable File
import {appearanceState, useAppearanceStore} from '../appearance-store';
|
|
import {FormImageSelector} from '@common/ui/images/image-selector';
|
|
import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
|
|
import {Trans} from '@common/i18n/trans';
|
|
import {Fragment, ReactNode} from 'react';
|
|
import {Settings} from '../../../core/settings/settings';
|
|
|
|
export function GeneralSection() {
|
|
return (
|
|
<Fragment>
|
|
<BrandingImageSelector
|
|
label={<Trans message="Favicon" />}
|
|
description={
|
|
<Trans message="This will generate different size favicons. Image should be at least 512x512 in size." />
|
|
}
|
|
type="favicon"
|
|
/>
|
|
<BrandingImageSelector
|
|
label={<Trans message="Light logo" />}
|
|
description={<Trans message="Will be used on dark backgrounds." />}
|
|
type="logo_light"
|
|
/>
|
|
<BrandingImageSelector
|
|
label={<Trans message="Dark logo" />}
|
|
description={
|
|
<Trans message="Will be used on light backgrounds. Will default to light logo if left empty." />
|
|
}
|
|
type="logo_dark"
|
|
/>
|
|
<BrandingImageSelector
|
|
label={<Trans message="Mobile light logo" />}
|
|
description={
|
|
<Trans message="Will be used on light backgrounds on mobile. Will default to desktop logo if left empty." />
|
|
}
|
|
type="logo_light_mobile"
|
|
/>
|
|
<BrandingImageSelector
|
|
label={<Trans message="Mobile dark logo" />}
|
|
description={
|
|
<Trans message="Will be used on dark backgrounds on mobile. Will default to desktop if left empty." />
|
|
}
|
|
type="logo_dark_mobile"
|
|
/>
|
|
<SiteNameTextField />
|
|
<SiteDescriptionTextArea />
|
|
</Fragment>
|
|
);
|
|
}
|
|
|
|
interface ImageSelectorProps {
|
|
label: ReactNode;
|
|
description: ReactNode;
|
|
type: keyof Settings['branding'];
|
|
}
|
|
function BrandingImageSelector({label, description, type}: ImageSelectorProps) {
|
|
const defaultValue = useAppearanceStore(
|
|
s => s.defaults?.settings.branding[type]
|
|
);
|
|
return (
|
|
<FormImageSelector
|
|
name={`settings.branding.${type}`}
|
|
className="border-b pb-30 mb-30"
|
|
label={label}
|
|
description={description}
|
|
diskPrefix="branding_media"
|
|
defaultValue={defaultValue}
|
|
onChange={() => {
|
|
appearanceState().preview.setHighlight('[data-logo="navbar"]');
|
|
}}
|
|
/>
|
|
);
|
|
}
|
|
function SiteNameTextField() {
|
|
return (
|
|
<FormTextField
|
|
name="appearance.env.app_name"
|
|
required
|
|
className="mt-20"
|
|
label={<Trans message="Site name" />}
|
|
/>
|
|
);
|
|
}
|
|
|
|
function SiteDescriptionTextArea() {
|
|
return (
|
|
<FormTextField
|
|
name="settings.branding.site_description"
|
|
className="mt-20"
|
|
inputElementType="textarea"
|
|
rows={4}
|
|
label={<Trans message="Site description" />}
|
|
/>
|
|
);
|
|
}
|