add CustomizeLayoutSetting component

resource/locales/en_US/admin/admin.json

@@ -115,6 +115,11 @@
     }
   },
   "customize_setting": {
+    "layout": "Layout",
+    "layout_options": {
+      "default": "Default content width",
+      "expanded": "Content width 100%"
+    },
     "theme": "Theme",
     "theme_desc": {
       "light_and_dark": "Light and dark modes",

resource/locales/ja_JP/admin/admin.json

@@ -115,6 +115,11 @@
     }
   },
   "customize_setting": {
+    "layout": "レイアウト",
+    "layout_options": {
+      "default": "デフォルトのコンテンツ幅",
+      "expanded": "コンテンツ幅 100%"
+    },
     "theme": "テーマ",
     "theme_desc" : {
       "light_and_dark": "Light/Dark モード選択あり",

resource/locales/zh_CN/admin/admin.json

@@ -114,6 +114,11 @@
 		}
 	},
 	"customize_setting": {
+    "layout": "布局",
+    "layout_options": {
+      "default": "默认内容宽度 ",
+      "expanded": "内容宽度100％ "
+    },
 		"theme": "主体",
 		"behavior": "行为",
 		"behavior_desc": {

src/client/js/components/Admin/Customize/Customize.jsx

@@ -10,6 +10,7 @@ import { toastError } from '../../../util/apiNotification';
 import toArrayIfNot from '../../../../../lib/util/toArrayIfNot';
 import { withLoadingSppiner } from '../../SuspenseUtils';
 
+import CustomizeLayoutSetting from './CustomizeLayoutSetting';
 import CustomizeThemeSetting from './CustomizeThemeSetting';
 import CustomizeFunctionSetting from './CustomizeFunctionSetting';
 import CustomizeHighlightSetting from './CustomizeHighlightSetting';
@@ -45,6 +46,9 @@ function Customize(props) {
 
   return (
     <Fragment>
+      <div className="mb-5">
+        <CustomizeLayoutSetting />
+      </div>
       <div className="mb-5">
         <CustomizeThemeSetting />
       </div>

src/client/js/components/Admin/Customize/CustomizeLayoutSetting.jsx

@@ -0,0 +1,46 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import AdminUpdateButtonRow from '../Common/AdminUpdateButtonRow';
+
+const CustomizeLayoutSetting = (props) => {
+  const { t } = props;
+
+  const onClickSubmit = () => {};
+
+  return (
+    <React.Fragment>
+      <div className="row">
+        <div className="col-12">
+          <h2 className="admin-setting-header">{t('admin:customize_setting.layout')}</h2>
+
+          <div className="d-flex justify-content-around mt-5">
+            <div className="card-deck">
+              <div className="card">
+                <img src="https://via.placeholder.com/350x150" />
+                <div className="card-body text-center">
+                  {t('admin:customize_setting.layout_options.default')}
+                </div>
+              </div>
+              <div className="card">
+                <img src="https://via.placeholder.com/350x150" />
+                <div className="card-body  text-center">
+                  {t('admin:customize_setting.layout_options.expanded')}
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <AdminUpdateButtonRow onClick={onClickSubmit} />
+        </div>
+      </div>
+    </React.Fragment>
+  );
+};
+
+CustomizeLayoutSetting.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+};
+
+export default withTranslation()(CustomizeLayoutSetting);