File "general-section.tsx"
Full Path: /home/markqprx/iniasli.pro/client/admin/appearance/sections/general-section.tsx
File size: 2.77 KB
MIME-type: text/plain
Charset: utf-8
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" />}
/>
);
}