78 lines
2.6 KiB
TypeScript
78 lines
2.6 KiB
TypeScript
"use client";
|
|
|
|
import { useConnections } from "@/api/hooks/reads";
|
|
import { Skeleton } from "@seed-design/react";
|
|
import { profileStrings } from "./strings";
|
|
|
|
/**
|
|
* Read-only connected-banks list (Task 13 scope: NO connect/disconnect here —
|
|
* that stays a mobile-only action per the brief). Mirrors the bank rows in
|
|
* `ProfileView.swift`'s `banksCard`, minus the connect/disconnect chips.
|
|
*/
|
|
export function ConnectedBanks() {
|
|
const { data: connections, isLoading } = useConnections();
|
|
|
|
return (
|
|
<section aria-labelledby="connected-banks-heading">
|
|
<h2
|
|
id="connected-banks-heading"
|
|
style={{ fontSize: 12, color: "var(--seed-color-fg-subtle, #6b7280)", margin: "0 0 12px" }}
|
|
>
|
|
{profileStrings.banks.title}
|
|
</h2>
|
|
|
|
{isLoading && (
|
|
<div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
|
|
<Skeleton height="44px" />
|
|
<Skeleton height="44px" />
|
|
</div>
|
|
)}
|
|
|
|
{!isLoading && (!connections || connections.length === 0) && (
|
|
<p style={{ fontSize: 14, color: "var(--seed-color-fg-muted, #6b7280)" }}>
|
|
{profileStrings.banks.empty}
|
|
</p>
|
|
)}
|
|
|
|
{!isLoading && connections && connections.length > 0 && (
|
|
<ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 4 }}>
|
|
{connections.map((c) => (
|
|
<li
|
|
key={c.bank}
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
padding: "10px 0",
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", flexDirection: "column" }}>
|
|
<span style={{ fontSize: 14, fontWeight: 600 }}>{c.bank}</span>
|
|
<span style={{ fontSize: 12, color: "var(--seed-color-fg-muted, #6b7280)" }}>
|
|
{c.username}
|
|
</span>
|
|
</div>
|
|
{c.courierManaged && (
|
|
<span
|
|
style={{
|
|
fontSize: 11,
|
|
padding: "4px 8px",
|
|
borderRadius: 999,
|
|
background: "var(--seed-color-bg-layer-default)",
|
|
color: "var(--seed-color-fg-muted, #6b7280)",
|
|
}}
|
|
>
|
|
{profileStrings.banks.courierManaged}
|
|
</span>
|
|
)}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
)}
|
|
|
|
<p style={{ fontSize: 12, color: "var(--seed-color-fg-muted, #6b7280)", marginTop: 8 }}>
|
|
{profileStrings.banks.manageNote}
|
|
</p>
|
|
</section>
|
|
);
|
|
}
|