Added static form to mailgun settings

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

ghost/admin-x-settings/src/admin-x-ds/global/Hint.stories.tsx

@@ -0,0 +1,18 @@
+import type {Meta, StoryObj} from '@storybook/react';
+
+import Hint from './Hint';
+
+const meta = {
+    title: 'Global / Hint',
+    component: Hint,
+    tags: ['autodocs']
+} satisfies Meta<typeof Hint>;
+
+export default meta;
+type Story = StoryObj<typeof Hint>;
+
+export const Default: Story = {
+    args: {
+        children: 'This is a hint'
+    }
+};

ghost/admin-x-settings/src/admin-x-ds/global/Hint.tsx

@@ -18,7 +18,7 @@ const Hint: React.FC<HintProps> = ({children, color, ...props}) => {
 
     if (React.isValidElement(children)) {
         return (
-            <>{children}</>
+            <span className={`mt-2 inline-block text-xs ${color ? `text-${color}` : `text-grey-700`}`} {...props}>{children}</span>
         );
     }
 

ghost/admin-x-settings/src/components/settings/email/Mailgun.tsx

@@ -1,7 +1,9 @@
+import Dropdown from '../../../admin-x-ds/global/Dropdown';
 import Link from '../../../admin-x-ds/global/Link';
 import React, {useState} 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 {TSettingGroupStates} from '../../../admin-x-ds/settings/SettingGroup';
 
 const MailGun: React.FC = () => {
@@ -26,7 +28,26 @@ const MailGun: React.FC = () => {
 
     const inputs = (
         <SettingGroupContent>
-            
+            <div className='grid grid-cols-2 gap-6'>
+                <Dropdown
+                    defaultSelectedOption='option-1'
+                    options={[
+                        {value: 'option-1', label: 'US'},
+                        {value: 'option-2', label: 'EU'}
+                    ]}
+                    title="Mailgun region"
+                    onSelect={() => {}}
+                />
+                <TextField 
+                    title='Mailgun domain'
+                />
+                <div className='col-span-2'>
+                    <TextField 
+                        hint={<>Find your Mailgun API keys<Link href="https://app.mailgun.com/app/account/security/api_keys" target="_blank">here</Link></>}
+                        title='Mailgun private API key'
+                    />
+                </div>
+            </div>
         </SettingGroupContent>
     );