129 lines
6.1 KiB
TypeScript
129 lines
6.1 KiB
TypeScript
|
|
import React, { useState } from 'react';
|
|
import { Card } from '../ui/card';
|
|
import { Button } from '../ui/button';
|
|
import { Play, RotateCcw, Copy } from 'lucide-react';
|
|
import { useToast } from '../../context/ToastContext';
|
|
|
|
const ENDPOINTS = [
|
|
{ method: 'GET', path: '/v1/user/profile', desc: 'Get current user profile' },
|
|
{ method: 'GET', path: '/v1/tracks', desc: 'List tracks' },
|
|
{ method: 'POST', path: '/v1/tracks/upload', desc: 'Upload a new track' },
|
|
{ method: 'GET', path: '/v1/sales/history', desc: 'Get sales history' },
|
|
];
|
|
|
|
export const APIPlaygroundView: React.FC = () => {
|
|
const { addToast } = useToast();
|
|
const [selectedEndpoint, setSelectedEndpoint] = useState(ENDPOINTS[0]);
|
|
const [params, setParams] = useState('{\n "limit": 10,\n "offset": 0\n}');
|
|
const [response, setResponse] = useState<string | null>(null);
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const handleSend = () => {
|
|
setLoading(true);
|
|
setResponse(null);
|
|
|
|
// Simulate network request
|
|
setTimeout(() => {
|
|
setLoading(false);
|
|
setResponse(JSON.stringify({
|
|
status: 200,
|
|
data: {
|
|
message: "Success",
|
|
timestamp: new Date().toISOString(),
|
|
result: [
|
|
{ id: 1, name: "Sample Item" },
|
|
{ id: 2, name: "Another Item" }
|
|
]
|
|
}
|
|
}, null, 2));
|
|
addToast("Request successful", "success");
|
|
}, 800);
|
|
};
|
|
|
|
return (
|
|
<div className="space-y-6 animate-fadeIn pb-20">
|
|
<h2 className="text-2xl font-bold text-white mb-6">API PLAYGROUND</h2>
|
|
|
|
<div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
|
|
{/* Request Builder */}
|
|
<div className="space-y-4">
|
|
<Card variant="default">
|
|
<h3 className="font-bold text-white mb-4">Request</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div>
|
|
<label className="block text-xs font-bold text-gray-400 uppercase mb-2">Endpoint</label>
|
|
<select
|
|
className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white focus:border-kodo-cyan outline-none font-mono text-sm"
|
|
value={selectedEndpoint.path}
|
|
onChange={(e) => {
|
|
const ep = ENDPOINTS.find(p => p.path === e.target.value);
|
|
if(ep) setSelectedEndpoint(ep);
|
|
}}
|
|
>
|
|
{ENDPOINTS.map(ep => (
|
|
<option key={ep.path} value={ep.path}>{ep.method} {ep.path}</option>
|
|
))}
|
|
</select>
|
|
<p className="text-xs text-gray-500 mt-1">{selectedEndpoint.desc}</p>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-xs font-bold text-gray-400 uppercase mb-2">Body (JSON)</label>
|
|
<textarea
|
|
className="w-full bg-kodo-ink border border-kodo-steel rounded p-3 text-white focus:border-kodo-cyan outline-none font-mono text-xs h-48 resize-none"
|
|
value={params}
|
|
onChange={(e) => setParams(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="flex justify-end gap-2">
|
|
<Button variant="ghost" onClick={() => setParams('{}')} icon={<RotateCcw className="w-4 h-4" />}>Reset</Button>
|
|
<Button variant="primary" onClick={handleSend} disabled={loading} icon={<Play className="w-4 h-4 fill-current" />}>
|
|
{loading ? 'Sending...' : 'Send Request'}
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
|
|
{/* Response Viewer */}
|
|
<div className="space-y-4 h-full">
|
|
<Card variant="gaming" className="h-full flex flex-col">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="font-bold text-white">Response</h3>
|
|
{response && (
|
|
<div className="flex gap-2">
|
|
<span className="text-xs font-bold text-kodo-lime bg-kodo-lime/10 px-2 py-1 rounded">200 OK</span>
|
|
<span className="text-xs font-bold text-gray-400 bg-white/10 px-2 py-1 rounded">45ms</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
|
|
<div className="flex-1 bg-black/30 rounded border border-kodo-steel/50 p-4 relative group">
|
|
{response ? (
|
|
<>
|
|
<pre className="text-xs text-green-400 font-mono whitespace-pre-wrap overflow-auto h-full max-h-[500px]">
|
|
{response}
|
|
</pre>
|
|
<button
|
|
className="absolute top-2 right-2 p-2 bg-gray-800 rounded text-gray-400 hover:text-white opacity-0 group-hover:opacity-100 transition-opacity"
|
|
onClick={() => { navigator.clipboard.writeText(response); addToast("Copied JSON"); }}
|
|
>
|
|
<Copy className="w-4 h-4" />
|
|
</button>
|
|
</>
|
|
) : (
|
|
<div className="flex flex-col items-center justify-center h-full text-gray-500">
|
|
<p className="text-sm">Waiting for request...</p>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|