75 lines
2.5 KiB
TypeScript
75 lines
2.5 KiB
TypeScript
import { ReactNode } from "react";
|
|
import Image from "next/image";
|
|
|
|
interface ConnectionCardProps {
|
|
icon: string | ReactNode;
|
|
title: string;
|
|
description?: string;
|
|
connected: boolean;
|
|
connectedAs?: string;
|
|
onConnect: () => void;
|
|
onDisconnect: () => void;
|
|
isLoading?: boolean;
|
|
}
|
|
|
|
export function ConnectionCard({
|
|
icon,
|
|
title,
|
|
description,
|
|
connected,
|
|
connectedAs,
|
|
onConnect,
|
|
onDisconnect,
|
|
isLoading
|
|
}: ConnectionCardProps) {
|
|
return (
|
|
<div className="flex items-center justify-between py-4 px-4 bg-[#1a1a1a] rounded-lg">
|
|
<div className="flex items-center gap-3">
|
|
{/* Icon */}
|
|
<div className="w-10 h-10 rounded-full bg-[#282828] flex items-center justify-center overflow-hidden">
|
|
{typeof icon === "string" ? (
|
|
<Image
|
|
src={icon}
|
|
alt={title}
|
|
width={24}
|
|
height={24}
|
|
className="w-6 h-6"
|
|
/>
|
|
) : (
|
|
icon
|
|
)}
|
|
</div>
|
|
|
|
{/* Text */}
|
|
<div>
|
|
<div className="text-sm font-medium text-white">{title}</div>
|
|
{connected && connectedAs ? (
|
|
<div className="text-xs text-gray-400">
|
|
Connected as <span className="text-white">{connectedAs}</span>
|
|
</div>
|
|
) : description ? (
|
|
<div className="text-xs text-gray-500">{description}</div>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Action Button */}
|
|
<button
|
|
onClick={connected ? onDisconnect : onConnect}
|
|
disabled={isLoading}
|
|
className={`
|
|
px-4 py-1.5 text-sm font-medium rounded-full transition-colors
|
|
${isLoading ? 'opacity-50 cursor-not-allowed' : ''}
|
|
${connected
|
|
? 'bg-transparent border border-gray-600 text-white hover:border-white hover:scale-105'
|
|
: 'bg-white text-black hover:scale-105'
|
|
}
|
|
`}
|
|
>
|
|
{isLoading ? "..." : connected ? "Disconnect" : "Connect"}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|