65 lines
2.1 KiB
TypeScript
65 lines
2.1 KiB
TypeScript
'use client';
|
|
|
|
import { useState, useMemo } from 'react';
|
|
import { Webhook, Copy, Check } from 'lucide-react';
|
|
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
|
|
import { Button } from '@/components/ui/button';
|
|
import { API_BASE_URL } from '@/lib/apiClient';
|
|
|
|
function getWebhookSnippet(): string {
|
|
const baseUrl = API_BASE_URL.replace(/\/$/, '');
|
|
return `curl -X POST ${baseUrl}/api/v1/translate \\
|
|
-H "Authorization: Bearer sk_live_YOUR_API_KEY" \\
|
|
-H "Content-Type: multipart/form-data" \\
|
|
-F "file=@document.xlsx" \\
|
|
-F "source_lang=en" \\
|
|
-F "target_lang=fr" \\
|
|
-F "webhook_url=https://your-app.com/webhook/complete"`;
|
|
}
|
|
|
|
export function WebhookSnippet() {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
const webhookSnippet = useMemo(() => getWebhookSnippet(), []);
|
|
|
|
const copySnippet = () => {
|
|
navigator.clipboard.writeText(webhookSnippet);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
};
|
|
|
|
return (
|
|
<Card>
|
|
<CardHeader>
|
|
<div className="flex items-center gap-2">
|
|
<Webhook className="h-5 w-5 text-accent" />
|
|
<CardTitle className="text-base">Webhook Integration</CardTitle>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent className="space-y-3">
|
|
<p className="text-sm text-muted-foreground">
|
|
Pass a <code className="rounded bg-muted px-1.5 py-0.5 font-mono text-xs">webhook_url</code> parameter
|
|
to receive a POST request when your translation is complete.
|
|
</p>
|
|
<div className="relative">
|
|
<Button
|
|
variant="ghost"
|
|
size="icon-sm"
|
|
className="absolute right-2 top-2 z-10"
|
|
onClick={copySnippet}
|
|
>
|
|
{copied ? (
|
|
<Check className="h-3.5 w-3.5 text-accent" />
|
|
) : (
|
|
<Copy className="h-3.5 w-3.5" />
|
|
)}
|
|
</Button>
|
|
<pre className="overflow-x-auto rounded-lg border border-border bg-foreground p-4 text-xs leading-relaxed text-background/90">
|
|
<code>{webhookSnippet}</code>
|
|
</pre>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|