1import { Button } from "@/components/ui/button";
 2import { Trash2 } from "lucide-react";
 3const LogsScreen = ({
 4  logs,
 5  setLogs,
 6}: {
 7  logs: string[];
 8  setLogs: Function;
 9}) => {
10  return (
11    <div className="mt-3 flex flex-col justify-center">
12      <div className="w-[300px] sm:w-[500px] md:w-[600px] flex flex-col bg-gray-800 rounded-lg p-5 max-h-96 overflow-auto relative">
13        {logs.map((log, index) => (
14            <pre key={index}>{JSON.stringify(log, null, 2).replace(/"/g, "")}</pre>
15        ))}
16        {logs.length === 0 && <p className="text-gray-300">No logs</p>}
17      </div>
18      {logs.length > 0 && (
19        <Button
20          variant="link"
21          onClick={() => setLogs([])}
22          className="flex gap-1"
23        >
24          <span>Clear logs</span>
25          <Trash2 className="w-4" />
26        </Button>
27      )}
28    </div>
29  );
30};
31
32export default LogsScreen;