Initial release v1.0.0

frontend/features/settings/components/ui/ConnectionCard.tsx

@@ -0,0 +1,74 @@
+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>
+    );
+}
+