✨ Add new config format

src/components/Settings/CustomizationSettings.tsx

@@ -0,0 +1,35 @@
+import { Stack } from '@mantine/core';
+import { useConfigContext } from '../../config/provider';
+import { ColorSelector } from './Customization/ColorSelector';
+import { BackgroundChanger } from './Customization/BackgroundChanger';
+import { CustomCssChanger } from './Customization/CustomCssChanger';
+import { FaviconChanger } from './Customization/FaviconChanger';
+import { LogoImageChanger } from './Customization/LogoImageChanger';
+import { MetaTitleChanger } from './Customization/MetaTitleChanger';
+import { PageTitleChanger } from './Customization/PageTitleChanger';
+import { OpacitySelector } from './Customization/OpacitySelector';
+import { ShadeSelector } from './Customization/ShadeSelector';
+import { LayoutSelector } from './Customization/LayoutSelector';
+
+export default function CustomizationSettings() {
+  const { config } = useConfigContext();
+
+  return (
+    <Stack mb="md" mr="sm" mt="xs">
+      <LayoutSelector defaultLayout={config?.settings.customization.layout} />
+      <PageTitleChanger defaultValue={config?.settings.customization.pageTitle} />
+      <MetaTitleChanger defaultValue={config?.settings.customization.metaTitle} />
+      <LogoImageChanger defaultValue={config?.settings.customization.logoImageUrl} />
+      <FaviconChanger defaultValue={config?.settings.customization.faviconUrl} />
+      <BackgroundChanger defaultValue={config?.settings.customization.backgroundImageUrl} />
+      <CustomCssChanger defaultValue={config?.settings.customization.customCss} />
+      <ColorSelector type="primary" defaultValue={config?.settings.customization.colors.primary} />
+      <ColorSelector
+        type="secondary"
+        defaultValue={config?.settings.customization.colors.secondary}
+      />
+      <ShadeSelector defaultValue={config?.settings.customization.colors.shade} />
+      <OpacitySelector defaultValue={config?.settings.customization.appOpacity} />
+    </Stack>
+  );
+}