From 93c8e3887a56f1a069178d1024c2acaf61739fb6 Mon Sep 17 00:00:00 2001
From: isra el <vernu1997@gmail.com>
Date: Tue, 28 May 2024 11:18:20 +0300
Subject: [PATCH] chore(web): add cURL example in code snippets section

---
 web/components/landing/CodeSnippetSection.tsx | 72 ++++++++++++++-----
 1 file changed, 53 insertions(+), 19 deletions(-)

diff --git a/web/components/landing/CodeSnippetSection.tsx b/web/components/landing/CodeSnippetSection.tsx
index 6116afc..c782275 100644
--- a/web/components/landing/CodeSnippetSection.tsx
+++ b/web/components/landing/CodeSnippetSection.tsx
@@ -1,25 +1,44 @@
-import { Box, Flex, Heading, Text } from '@chakra-ui/react'
+import {
+  Box,
+  Flex,
+  Heading,
+  Tab,
+  TabList,
+  TabPanel,
+  TabPanels,
+  Tabs,
+  Text,
+} from '@chakra-ui/react'
 import React from 'react'
 import AnimatedScrollWrapper from '../AnimatedScrollWrapper'
 import SyntaxHighlighter from 'react-syntax-highlighter'
 
 export default function CodeSnippetSection() {
-  const codeString = `
-
-  const BASE_URL = 'https://api.textbee.dev/api/v1'
-  const API_KEY = 'YOUR_API_KEY'
-  const DEVICE_ID = 'YOUR_DEVICE_ID'
-  
-  await axios.post(\`\$\{BASE_URL\}/gateway/devices/\$\{DEVICE_ID}/sendSMS\`, {
-    recipients: [ '+251912345678' ],
-    message: 'Hello World!',
-  }, {
-    headers: {
-      'x-api-key': API_KEY,
+  const codeSnippets = [
+    {
+      tech: 'Node.Js',
+      language: 'javascript',
+      snippet: `
+    const BASE_URL = 'https://api.textbee.dev/api/v1'
+    const API_KEY = 'YOUR_API_KEY'
+    const DEVICE_ID = 'YOUR_DEVICE_ID'
+    
+    await axios.post(\`\$\{BASE_URL\}/gateway/devices/\$\{DEVICE_ID}/sendSMS\`, {
+      recipients: [ '+251912345678' ],
+      message: 'Hello World!',
+    }, {
+      headers: {
+        'x-api-key': API_KEY,
+      },
+    })
+    `,
     },
-  })
-  
-  `
+    {
+      tech: 'cURL',
+      language: 'shell',
+      snippet: `curl -X POST \ https://api.textbee.dev/api/v1/gateway/devices/<DEVICE_ID>/sendSMS \ -H 'x-api-key: <API_KEY>' \ -H 'Content-Type: application/json' \ -d '{ "recipients": ["+251912345678"], "message": "Hello World!" }'`,
+    },
+  ]
 
   return (
     <AnimatedScrollWrapper>
@@ -45,9 +64,24 @@ export default function CodeSnippetSection() {
             border={'1px solid #E2E8F0'}
             w={{ base: '100%', md: '90%' }}
           >
-            <SyntaxHighlighter language='javascript'>
-              {codeString}
-            </SyntaxHighlighter>
+            <Tabs>
+              <TabList>
+                {codeSnippets.map((snippet) => (
+                  <Tab key={snippet.tech}>{snippet.tech}</Tab>
+                ))}
+              </TabList>
+              <TabPanels>
+                {codeSnippets.map((snippet) => {
+                  return (
+                    <TabPanel key={snippet.tech}>
+                      <SyntaxHighlighter language={snippet.language}>
+                        {snippet.snippet}
+                      </SyntaxHighlighter>
+                    </TabPanel>
+                  )
+                })}
+              </TabPanels>
+            </Tabs>
           </Box>
         </Flex>
       </Box>