You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
2.6 KiB
91 lines
2.6 KiB
import { Tabs, TabsContent, TabsList, TabsTrigger } from '../../../components/ui/tabs'
|
|
import SyntaxHighlighter from 'react-syntax-highlighter'
|
|
|
|
const codeSnippets = [
|
|
{
|
|
tech: 'NodeJs',
|
|
language: 'javascript',
|
|
snippet: `import axios from 'axios'
|
|
|
|
const BASE_URL = 'https://api.textbee.dev/api/v1'
|
|
const API_KEY = 'YOUR_API_KEY'
|
|
const DEVICE_ID = 'YOUR_DEVICE_ID'
|
|
|
|
const response = await axios.post(\`\$\{BASE_URL\}/gateway/devices/\$\{DEVICE_ID}/sendSMS\`, {
|
|
recipients: [ '+1234567890' ],
|
|
message: 'Hello World!',
|
|
}, {
|
|
headers: {
|
|
'x-api-key': API_KEY,
|
|
},
|
|
})
|
|
|
|
console.log(response.data)`,
|
|
},
|
|
{
|
|
tech: 'Python',
|
|
language: 'python',
|
|
snippet: `import requests
|
|
|
|
BASE_URL = 'https://api.textbee.dev/api/v1'
|
|
API_KEY = 'YOUR_API_KEY'
|
|
DEVICE_ID = 'YOUR_DEVICE_ID'
|
|
|
|
response = requests.post(
|
|
f'{BASE_URL}/api/device/{DEVICE_ID}/sendSMS',
|
|
json={
|
|
'recipients': ['+1234567890'],
|
|
'message': 'Hello World!'
|
|
},
|
|
headers={'x-api-key': API_KEY})
|
|
|
|
print(response.json())`,
|
|
},
|
|
{
|
|
tech: 'cURL',
|
|
language: 'bash',
|
|
snippet: `curl -X POST "https://api.textbee.dev/api/v1/gateway/devices/YOUR_DEVICE_ID/sendSMS" \\
|
|
-H 'x-api-key: YOUR_API_KEY' \\
|
|
-H 'Content-Type: application/json' \\
|
|
-d '{
|
|
"recipients": [ "+1234567890" ],
|
|
"message": "Hello from textbee.dev"
|
|
}'`,
|
|
},
|
|
]
|
|
|
|
export default function CodeSnippetSection() {
|
|
return (
|
|
<section className='container mx-auto py-24 px-4 sm:px-6 lg:px-8 max-w-7xl bg-gray-50'>
|
|
<div className='mx-auto max-w-[58rem]'>
|
|
<h3 className='text-3xl font-bold mb-8'>Code Snippet</h3>
|
|
<div className='bg-white p-6 rounded-xl shadow-sm'>
|
|
<Tabs defaultValue={codeSnippets[0].tech} className='w-full'>
|
|
<TabsList className='grid w-full grid-cols-3'>
|
|
{codeSnippets.map((snippet) => {
|
|
return (
|
|
<TabsTrigger key={snippet.tech} value={snippet.tech}>
|
|
{snippet.tech}
|
|
</TabsTrigger>
|
|
)
|
|
})}
|
|
</TabsList>
|
|
{codeSnippets.map((snippet) => {
|
|
return (
|
|
<TabsContent key={snippet.tech} value={snippet.tech}>
|
|
<SyntaxHighlighter
|
|
language={snippet.language}
|
|
showLineNumbers={snippet.language !== 'bash'}
|
|
// className='min-h-[200px]'
|
|
>
|
|
{snippet.snippet}
|
|
</SyntaxHighlighter>
|
|
</TabsContent>
|
|
)
|
|
})}
|
|
</Tabs>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|