Components•Integration card
Components•Integration card
Integration card
Connect a third-party app. Lists the permissions it asks for, walks through the OAuth hand-off with a live handshake, then shows the account, sync state and a guarded disconnect.
Dependencies
Copy below cli
npx shadcn add @bjork-ui/integration-cardHow to use
import { IntegrationCard } from "@/components/bjork-ui/cards/integration-card";<IntegrationCard app={{ name: "Ledgerline", publisher: "Ledgerline Labs", description: "Sync invoices into your books.", color: "#2f6f5e" }} host={{ name: "Fieldwork", color: "#ec5c13" }} scopes={[ { id: "invoices.read", label: "Read invoices", required: true }, { id: "invoices.write", label: "Mark invoices paid" }, ]} onConnect={async (scopes) => { const account = await startOAuth("ledgerline", scopes); // reject to show the error state return { name: account.email, connectedAt: Date.now(), lastSyncedAt: Date.now() }; }} onDisconnect={() => api.revoke("ledgerline")} onSync={async () => (await api.sync("ledgerline")).finishedAt}/>
F
Not connectedL
Ledgerline
by Ledgerline Labs
Sync invoices, payouts and customers into your books every hour.