From 35f7b7058c22ee8a98d82307f1db8aba5704b9db Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Tue, 30 May 2023 19:05:22 +0200
Subject: [PATCH] Added design setting skeleton to AdmiX Settings

refs. https://github.com/TryGhost/Team/issues/3328
---
 .../src/components/Settings.tsx               |  2 ++
 .../src/components/settings/site/Design.tsx   | 28 +++++++++++++++++++
 .../components/settings/site/SiteSettings.tsx | 15 ++++++++++
 3 files changed, 45 insertions(+)
 create mode 100644 ghost/admin-x-settings/src/components/settings/site/Design.tsx
 create mode 100644 ghost/admin-x-settings/src/components/settings/site/SiteSettings.tsx

diff --git a/ghost/admin-x-settings/src/components/Settings.tsx b/ghost/admin-x-settings/src/components/Settings.tsx
index 7b170841fc..cc37db1ced 100644
--- a/ghost/admin-x-settings/src/components/Settings.tsx
+++ b/ghost/admin-x-settings/src/components/Settings.tsx
@@ -3,6 +3,7 @@ import React, {useContext} from 'react';
 import EmailSettings from './settings/email/EmailSettings';
 import GeneralSettings from './settings/general/GeneralSettings';
 import MembershipSettings from './settings/membership/MembershipSettings';
+import SiteSettings from './settings/site/SiteSettings';
 import {SettingsContext} from './providers/SettingsProvider';
 
 const Settings: React.FC = () => {
@@ -20,6 +21,7 @@ const Settings: React.FC = () => {
     return (
         <>
             <GeneralSettings />
+            <SiteSettings />
             <MembershipSettings />
             <EmailSettings />
         </>
diff --git a/ghost/admin-x-settings/src/components/settings/site/Design.tsx b/ghost/admin-x-settings/src/components/settings/site/Design.tsx
new file mode 100644
index 0000000000..b76902587c
--- /dev/null
+++ b/ghost/admin-x-settings/src/components/settings/site/Design.tsx
@@ -0,0 +1,28 @@
+import Button from '../../../admin-x-ds/global/Button';
+import NiceModal from '@ebay/nice-modal-react';
+import PreviewModal from '../../../admin-x-ds/global/PreviewModal';
+import React from 'react';
+import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+
+const Design: React.FC = () => {
+    const openPreviewModal = () => {
+        NiceModal.show(PreviewModal, {
+            title: 'Design',
+            okLabel: 'Save',
+            preview: 'Here we go',
+            sidebar: 'And here too'
+        });
+    };
+
+    return (
+        <SettingGroup
+            customButtons={<Button color='green' label='Customize' link onClick={openPreviewModal}/>}
+            description="Customize your site and manage themes"
+            title="Branding and design"
+        >
+            
+        </SettingGroup>
+    );
+};
+
+export default Design;
\ No newline at end of file
diff --git a/ghost/admin-x-settings/src/components/settings/site/SiteSettings.tsx b/ghost/admin-x-settings/src/components/settings/site/SiteSettings.tsx
new file mode 100644
index 0000000000..b465f3a897
--- /dev/null
+++ b/ghost/admin-x-settings/src/components/settings/site/SiteSettings.tsx
@@ -0,0 +1,15 @@
+import Design from './Design';
+import React from 'react';
+import SettingSection from '../../../admin-x-ds/settings/SettingSection';
+
+const SiteSettings: React.FC = () => {
+    return (
+        <>
+            <SettingSection title="Site">
+                <Design />
+            </SettingSection>
+        </>
+    );
+};
+
+export default SiteSettings;
\ No newline at end of file