Files
zellyy-finance/src/archive/components/SupabaseConnectionStatus.tsx

43 lines
1.3 KiB
TypeScript

import React from 'react';
import { CheckCircle, XCircle } from 'lucide-react';
interface SupabaseConnectionStatusProps {
testResults: {
connected: boolean;
message: string;
details?: string;
} | null;
}
const SupabaseConnectionStatus = ({ testResults }: SupabaseConnectionStatusProps) => {
if (!testResults) return null;
return (
<div className={`mt-2 p-3 rounded-md text-sm ${testResults.connected ? 'bg-green-50' : 'bg-red-50'}`}>
<div className="flex items-start">
{testResults.connected ? (
<CheckCircle className="h-5 w-5 text-green-500 mr-2 flex-shrink-0 mt-0.5" />
) : (
<XCircle className="h-5 w-5 text-red-500 mr-2 flex-shrink-0 mt-0.5" />
)}
<div>
<p className={`font-medium ${testResults.connected ? 'text-green-800' : 'text-red-800'}`}>
{testResults.connected ? '연결됨' : '연결 실패'}
</p>
<p className={testResults.connected ? 'text-green-700' : 'text-red-700'}>
{testResults.message}
</p>
{testResults.details && (
<p className="text-gray-500 mt-1 text-xs">
{testResults.details}
</p>
)}
</div>
</div>
</div>
);
};
export default SupabaseConnectionStatus;