feat: Zendesk

website/package.json

@@ -28,6 +28,8 @@
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
     "react-icons": "^4.11.0",
+    "react-markdown": "^7.1.0",
+    "remark-gfm": "^2.0.0",
     "reodotdev": "^1.0.0"
   },
   "devDependencies": {

website/sidebars.js

@@ -333,7 +333,9 @@ const sidebars = {
                     'connect-data/reference/aws-lambda',
                     'connect-data/reference/querying-google-sheets',
                     'connect-data/reference/hubspot',
-                    'connect-data/reference/twilio'
+                    'connect-data/reference/salesforce',
+                    'connect-data/reference/twilio',
+                    'connect-data/reference/zendesk',
                   ],
                 },
                 //category- AI Integrations

website/src/components/Dropdown.js

@@ -0,0 +1,38 @@
+import React, { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+
+function Dropdown({ label, options, content }) {
+  const [selected, setSelected] = useState(options[0]);
+
+  return (
+    <div>
+      {/* Dropdown Menu */}
+      <select
+        onChange={(e) => setSelected(e.target.value)}
+        value={selected}
+        style={{
+          padding: "10px",
+          borderRadius: "5px",
+          border: "1px solid #ccc",
+          marginBottom: "10px",
+        }}
+      >
+        {options.map((option, index) => (
+          <option key={index} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+
+      {/* Render Markdown Content */}
+      <div>
+        <ReactMarkdown remarkPlugins={[remarkGfm]}>
+          {content[selected]}
+        </ReactMarkdown>
+      </div>
+    </div>
+  );
+}
+
+export default Dropdown;