0152a2fda0
- Implemented a bash script to test n8n API and retrieve credential schemas. - Added types for API responses, Google Calendar, and WhatsApp instances. - Configured Vitest for testing with React and added setup for testing-library.
57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
interface GoogleCalendarCardProps {
|
|
isConnected: boolean;
|
|
connectedEmail?: string | null;
|
|
onConnect: () => void;
|
|
connecting?: boolean;
|
|
}
|
|
|
|
export default function GoogleCalendarCard({
|
|
isConnected,
|
|
connectedEmail,
|
|
onConnect,
|
|
connecting = false,
|
|
}: GoogleCalendarCardProps) {
|
|
return (
|
|
<div className="bg-gray-800 border border-gray-700 rounded-lg p-6">
|
|
<div className="flex items-center justify-between mb-4">
|
|
<h3 className="text-lg font-semibold text-white">Google Calendar</h3>
|
|
<div
|
|
className={`px-3 py-1 rounded-full text-sm font-medium ${
|
|
connecting
|
|
? "bg-yellow-500/10 text-yellow-500"
|
|
: isConnected
|
|
? "bg-green-500/10 text-green-500"
|
|
: "bg-gray-500/10 text-gray-400"
|
|
}`}
|
|
>
|
|
{connecting ? (
|
|
<span className="flex items-center gap-2">
|
|
<div className="animate-spin rounded-full h-3 w-3 border-b-2 border-yellow-500" />
|
|
Conectando...
|
|
</span>
|
|
) : isConnected ? (
|
|
"Conectado ✅"
|
|
) : (
|
|
"Não conectado ❌"
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{connectedEmail && (
|
|
<p className="text-gray-400 text-sm mb-4">
|
|
Conectado como: {connectedEmail}
|
|
</p>
|
|
)}
|
|
|
|
<button
|
|
type="button"
|
|
onClick={onConnect}
|
|
disabled={connecting}
|
|
className="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-2 px-4 rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
|
>
|
|
{connecting ? "Conectando..." : isConnected ? "Reconectar" : "Conectar"}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|