Added basic Twitter card in AdminX Settings

refs. https://github.com/TryGhost/Team/issues/3150

ghost/admin-x-settings/src/components/settings/general/GeneralSettings.tsx

@@ -8,6 +8,7 @@ import SettingSection from '../../../admin-x-ds/settings/SettingSection';
 import SocialAccounts from './SocialAccounts';
 import TimeZone from './TimeZone';
 import TitleAndDescription from './TitleAndDescription';
+import Twitter from './Twitter';
 import Users from './Users';
 
 const GeneralSettings: React.FC = () => {
@@ -18,6 +19,7 @@ const GeneralSettings: React.FC = () => {
                 <TimeZone />
                 <PublicationLanguage />
                 <Metadata />
+                <Twitter />
                 <Facebook />
                 <SocialAccounts />
                 <LockSite />

ghost/admin-x-settings/src/components/settings/general/Twitter.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import SettingGroup from '../../../admin-x-ds/settings/SettingGroup';
+import SettingGroupContent from '../../../admin-x-ds/settings/SettingGroupContent';
+import TextField from '../../../admin-x-ds/global/TextField';
+import useSettingGroup from '../../../hooks/useSettingGroup';
+
+const Twitter: React.FC = () => {
+    const {
+        currentState,
+        focusRef,
+        handleSave,
+        handleCancel,
+        updateSetting,
+        getSettingValues,
+        handleStateChange
+    } = useSettingGroup();
+
+    const [twitterTitle, twitterDescription, siteTitle, siteDescription] = getSettingValues(['twitter_title', 'twitter_description', 'title', 'description']) as string[];
+
+    const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        updateSetting('twitter_title', e.target.value);
+    };
+
+    const handleDescriptionChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+        updateSetting('twitter_description', e.target.value);
+    };
+
+    const values = (
+        <div>
+            [TBD: twitter card preview]
+        </div>
+    );
+
+    const inputFields = (
+        <SettingGroupContent>
+            <TextField
+                inputRef={focusRef}
+                placeholder={siteTitle}
+                title="Twitter title"
+                value={twitterTitle}
+                onChange={handleTitleChange}
+            />
+            <TextField
+                placeholder={siteDescription}
+                title="Twitter description"
+                value={twitterDescription}
+                onChange={handleDescriptionChange}
+            />
+        </SettingGroupContent>
+    );
+
+    return (
+        <SettingGroup
+            description='Customize structured data of your site'
+            navid='twitter'
+            state={currentState}
+            title='Twitter card'
+            onCancel={handleCancel}
+            onSave={handleSave}
+            onStateChange={handleStateChange}
+        >
+            {values}
+            {currentState !== 'view' ? inputFields : ''}
+        </SettingGroup>
+    );
+};
+
+export default Twitter;