67 lines
2.0 KiB
TypeScript
67 lines
2.0 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
interface Account {
|
|
id: number | string;
|
|
name: string;
|
|
email: string;
|
|
color: string;
|
|
folders?: string[];
|
|
}
|
|
|
|
interface DebugViewProps {
|
|
accounts: Account[];
|
|
selectedAccount: Account | null;
|
|
mailboxes: string[];
|
|
}
|
|
|
|
export default function DebugView({ accounts, selectedAccount, mailboxes }: DebugViewProps) {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
|
|
if (!isOpen) {
|
|
return (
|
|
<Button
|
|
className="fixed bottom-4 right-4 bg-red-600 hover:bg-red-700 text-white z-50"
|
|
onClick={() => setIsOpen(true)}
|
|
>
|
|
Debug
|
|
</Button>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className="fixed inset-0 bg-black/80 z-50 overflow-auto flex flex-col p-4">
|
|
<div className="bg-white rounded-lg p-4 mb-4 max-w-3xl mx-auto w-full">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h2 className="text-xl font-bold">Debug View</h2>
|
|
<Button variant="outline" onClick={() => setIsOpen(false)}>Close</Button>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-2">Accounts ({accounts.length})</h3>
|
|
<pre className="bg-gray-100 p-2 rounded text-xs overflow-auto max-h-[300px]">
|
|
{JSON.stringify(accounts, null, 2)}
|
|
</pre>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="text-lg font-semibold mb-2">Selected Account</h3>
|
|
<pre className="bg-gray-100 p-2 rounded text-xs overflow-auto max-h-[300px]">
|
|
{selectedAccount ? JSON.stringify(selectedAccount, null, 2) : 'None'}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="mt-4">
|
|
<h3 className="text-lg font-semibold mb-2">Mailboxes ({mailboxes?.length || 0})</h3>
|
|
<pre className="bg-gray-100 p-2 rounded text-xs overflow-auto max-h-[150px]">
|
|
{JSON.stringify(mailboxes, null, 2)}
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|