wip buttons

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

@@ -1,4 +1,5 @@
 import React from 'react';
+import 
 import Accordion from '../Common/Accordion';
 
 const CustomBotWithProxySettingsAccordion = () => {
@@ -8,12 +9,48 @@ const CustomBotWithProxySettingsAccordion = () => {
       <Accordion
         title={<><span className="mr-2">①</span>First Accordion</>}
       >
-        1
+        <div className="row my-5">
+          <div className="mx-auto">
+            <div>
+              <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
+                {t('admin:slack_integration.accordion.create_bot')}
+                <i className="fa fa-external-link ml-2" aria-hidden="true" />
+              </button>
+            </div>
+            {/* TODO: Insert DOCS link */}
+            <a href="#">
+              <p className="text-center mt-1">
+                <small>
+                  {t('admin:slack_integration.accordion.how_to_create_a_bot')}
+                  <i className="fa fa-external-link ml-2" aria-hidden="true" />
+                </small>
+              </p>
+            </a>
+          </div>
+        </div>
       </Accordion>
       <Accordion
         title={<><span className="mr-2">②</span>Second Accordion</>}
       >
-        2
+        <div className="row my-5">
+          <div className="mx-auto">
+            <div>
+              <button type="button" className="btn btn-primary text-nowrap mx-1" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
+                {t('admin:slack_integration.accordion.create_bot')}
+                <i className="fa fa-external-link ml-2" aria-hidden="true" />
+              </button>
+            </div>
+            {/* TODO: Insert DOCS link */}
+            <a href="#">
+              <p className="text-center mt-1">
+                <small>
+                  {t('admin:slack_integration.accordion.how_to_create_a_bot')}
+                  <i className="fa fa-external-link ml-2" aria-hidden="true" />
+                </small>
+              </p>
+            </a>
+          </div>
+        </div>
       </Accordion>
       <Accordion
         title={<><span className="mr-2">③</span>Third Accordion</>}