ConnectorCard
Integration-hub card. Renders a connector logo (via @ship-it-ui/icons
connector glyphs), the connector name, a sync-state dot (with a pulse on
syncing), a relative last-synced timestamp, an optional summary, and an
actions slot.
When onClick is provided the whole card becomes keyboard-focusable
(role="button", Enter/Space activate). Inner action buttons stop event
propagation so they don't trigger the card's click.
Default#
Three connectors in three states — connected, syncing, and error. The syncing dot pulses to indicate live activity.
Loading…
Props#
| Prop | Type | Default | Description |
|---|---|---|---|
| connector * | (string & {}) | "github" | "notion" | "slack" | "linear" | "jira" | "pagerduty" | "confluence" | "gdrive" | "s3" | "postgres" | — | Connector name keyed into `@ship-it-ui/icons` connectorGlyphs. |
| name * | ReactNode | — | Display name shown next to the logo. |
| status * | enum | — | Sync status. Drives the status dot tone + the default status label. |
| lastSyncedAt | string | number | Date | undefined | — | Last successful sync timestamp. Formatted relative to `relativeNow`. |
| relativeNow | Date | undefined | — | Reference time for relative formatting (injectable for tests/SSR). |
| summary | ReactNode | — | Free-text summary (e.g. "1,243 docs · 8 channels"). |
| actions | ReactNode | — | Trailing action slot — typically a `Button` or `DropdownMenu` trigger. |
| onClick | (() => void) | undefined | — | Click handler. When provided, the card becomes a button. |
| accessibleName | string | undefined | — | Accessible name override. Required when `onClick` is set *and* `name` is not a string — without it the button has no accessible name (axe `button-name`). Optional otherwise. |