Spaces:
Sleeping
Sleeping
File size: 1,880 Bytes
4c41b3d | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | import React from "react";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Copy, Download, Play } from "lucide-react";
import { toast } from "sonner";
interface CodeEditorProps {
code: string;
language?: string;
onChange?: (code: string) => void;
onRun?: () => void;
}
export function CodeEditor({ code, language = "python", onChange, onRun }: CodeEditorProps) {
const copyToClipboard = () => {
navigator.clipboard.writeText(code);
toast.success("Code copied to clipboard!");
};
return (
<Card className="bg-gray-900 border-green-500/20 overflow-hidden">
<CardHeader className="bg-black/40 border-b border-green-500/10 py-2 px-4 flex flex-row justify-between items-center">
<CardTitle className="text-xs font-mono text-gray-400 uppercase tracking-widest">
{language} Editor
</CardTitle>
<div className="flex gap-2">
<Button variant="ghost" size="icon" className="h-8 w-8 text-gray-400 hover:text-green-400" onClick={copyToClipboard}>
<Copy size={14} />
</Button>
<Button variant="ghost" size="icon" className="h-8 w-8 text-gray-400 hover:text-cyan-400">
<Download size={14} />
</Button>
{onRun && (
<Button variant="ghost" size="icon" className="h-8 w-8 text-green-500 hover:text-green-400" onClick={onRun}>
<Play size={14} />
</Button>
)}
</div>
</CardHeader>
<CardContent className="p-0">
<textarea
value={code}
onChange={(e) => onChange?.(e.target.value)}
className="w-full h-96 bg-black text-green-400 font-mono text-sm p-4 focus:outline-none resize-none"
spellCheck={false}
/>
</CardContent>
</Card>
);
}
|