Merge pull request #3679 from weseek/feat/5772-with-proxy-accordion

Feat/5772 with proxy accordion

src/client/js/components/Admin/SlackIntegration/CustomBotWithProxySettings.jsx

@@ -5,6 +5,7 @@ import AppContainer from '../../../services/AppContainer';
 import AdminAppContainer from '../../../services/AdminAppContainer';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import CustomBotWithProxyIntegrationCard from './CustomBotWithProxyIntegrationCard';
+import CustomBotWithProxySettingsAccordion from './CustomBotWithProxySettingsAccordion';
 
 const CustomBotWithProxySettings = (props) => {
   // eslint-disable-next-line no-unused-vars
@@ -19,6 +20,9 @@ const CustomBotWithProxySettings = (props) => {
 
       <CustomBotWithProxyIntegrationCard />
 
+      <div className="my-5 mx-3">
+        <CustomBotWithProxySettingsAccordion />
+      </div>
     </>
   );
 };

src/client/js/components/Admin/SlackIntegration/CustomBotWithProxySettingsAccordion.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Accordion from '../Common/Accordion';
+
+const CustomBotWithProxySettingsAccordion = () => {
+
+  return (
+    <div className="card border-0 rounded-lg shadow overflow-hidden">
+      <Accordion
+        title={<><span className="mr-2">①</span>First Accordion</>}
+      >
+        1
+      </Accordion>
+      <Accordion
+        title={<><span className="mr-2">②</span>Second Accordion</>}
+      >
+        2
+      </Accordion>
+      <Accordion
+        title={<><span className="mr-2">③</span>Third Accordion</>}
+      >
+        3
+      </Accordion>
+      <Accordion
+        title={<><span className="mr-2">④</span>Fourth Accordion</>}
+      >
+        4
+      </Accordion>
+    </div>
+  );
+};
+
+export default CustomBotWithProxySettingsAccordion;