mirror/textbee
1
0
Fork 0
mirror of https://github.com/vernu/textbee.git synced 2026-05-19 05:46:23 -04:00
Code Issues Packages Projects Releases Wiki Activity

chore(web): add cURL example in code snippets section

Browse Source
This commit is contained in:
isra el
2024-05-28 11:18:20 +03:00
parent dd6bd9d3ad
commit 93c8e3887a
1 changed files with 53 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
web/components/landing/CodeSnippetSection.tsx
View File

@@ -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>