added search response into searchmodal ui, restructured folders

2026-06-24 15:57:10 +02:00
parent a1ce085123
commit 6e3d3347e2
16 changed files with 110 additions and 34 deletions
@@ -0,0 +1,49 @@
+import type { ConnectionStatus } from '../../types/connection'
+import { ActionButton } from '../ui/ActionButton'
+import './ServiceCard.scss'
+
+interface Props {
+  serviceType: string
+  label: string
+  icon: string
+  status: ConnectionStatus | null
+  onConnect: () => void
+  onDisconnect: () => void
+  onSearch: () => void
+}
+
+export function ServiceCard({ serviceType: _serviceType, label, icon, status, onConnect, onDisconnect, onSearch }: Readonly<Props>) {
+  const connected = status?.connected ?? false
+
+  const formatExpiry = (iso: string | null) => {
+    if (!iso) return null
+    const d = new Date(iso)
+    return d.toLocaleDateString(undefined, { dateStyle: 'medium' })
+  }
+
+  return (
+    <div className="service-card">
+      <div className="service-card__info">
+        <div className="service-card__icon">{icon}</div>
+        <div>
+          <p className="service-card__name">{label}</p>
+          <p className="service-card__meta">
+            <span className={`service-card__badge service-card__badge--${connected ? 'connected' : 'disconnected'}`}>
+              {connected ? 'Connected' : 'Not connected'}
+            </span>
+            {connected && status?.username && <span>{status.username}</span>}
+            {connected && status?.expiresAt && (
+              <span>· expires {formatExpiry(status.expiresAt)}</span>
+            )}
+          </p>
+        </div>
+      </div>
+      <div className="service-card__actions">
+        <ActionButton variant={connected ? 'disconnect' : 'connect'} onClick={connected ? onDisconnect : onConnect}>
+          {connected ? 'Disconnect' : 'Connect'}
+        </ActionButton>
+        {connected && (<ActionButton variant='search' onClick={onSearch}>Search</ActionButton>)}
+      </div>
+    </div>
+  )
+}