create colorBox component

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

@@ -6,6 +6,7 @@ import { createSubscribedElement } from '../../UnstatedUtils';
 
 import AppContainer from '../../../services/AppContainer';
 import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
+import ThemeColorBox from './ThemeColorBox';
 
 
 class CustomizeThemeForm extends React.Component {
@@ -15,7 +16,7 @@ class CustomizeThemeForm extends React.Component {
       <div id="themeOptions">
         {/* Light Themes  */}
         <div className="d-flex">
-
+          <ThemeColorBox />
         </div>
         {/* Dark Themes  */}
         <div className="d-flex mt-3">
@@ -26,6 +27,7 @@ class CustomizeThemeForm extends React.Component {
   }
 
 }
+
 const CustomizeThemeFormWrapper = (props) => {
   return createSubscribedElement(CustomizeThemeForm, props, [AppContainer, AdminCustomizeContainer]);
 };

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

@@ -0,0 +1,31 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+
+import AppContainer from '../../../services/AppContainer';
+import AdminCustomizeContainer from '../../../services/AdminCustomizeContainer';
+
+
+class ThemeColorBox extends React.Component {
+
+  render() {
+    return (
+      <p>hoge</p>
+    );
+  }
+
+}
+
+const ThemeColorBoxWrapper = (props) => {
+  return createSubscribedElement(ThemeColorBox, props, [AppContainer, AdminCustomizeContainer]);
+};
+
+ThemeColorBox.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminCustomizeContainer: PropTypes.instanceOf(AdminCustomizeContainer).isRequired,
+};
+
+export default withTranslation()(ThemeColorBoxWrapper);