IntegrationsGrid

import { state } from '@kerf-js/core'import {  Input,  IntegrationsGrid,  Toaster} from '@kerf-js/veneer'import type { Integration } from '@kerf-js/veneer'export function Workspace() {  const items =    state<readonly Integration[]>(INTEGRATIONS)  const mark = (id: string, next: Partial<Integration>) =>    (items.value = items.value.map((i) =>      i.id === id ? { ...i, ...next } : i,    ))  const connect = async (item: Integration) => {    mark(item.id, { state: 'pending' })    await wait(1200)    mark(item.id, {      state: 'connected',      detail: 'kerf-dev',      failure: undefined,    })  }  return (    <>      <IntegrationsGrid        items={items}        onConnect={(item) => void connect(item)}        onDisconnect={(item) =>          mark(item.id, { state: 'off' })        }        onRestore={(item) =>          mark(item.id, { state: 'connected' })        }        settings={(item) => (          <Input            label="Channel or team"            defaultValue={item.detail}          />        )}      />      <Toaster />    </>  )}const INTEGRATIONS: Integration[] = [  {    id: 'github',    name: 'GitHub',    summary:      'Deploy on push, status checks on pull requests.',    state: 'connected',    detail: 'kerf-dev · 10 repositories',    can: [      'Read your repositories',      'Post commit statuses',    ],  },  {    id: 'slack',    name: 'Slack',    summary: 'Deploy and incident messages in a channel.',    state: 'error',    detail: 'Token expired Oct 26',    failure: 'Messages to #deploys stopped on Oct 26.',    can: ['Post to the channel you pick'],  },  {    id: 'linear',    name: 'Linear',    summary: 'Link deploys to the issues they close.',    state: 'off',    can: ['Read your issues', 'Comment on issues'],  },  {    id: 'datadog',    name: 'Datadog',    summary: 'Mark deploys on your dashboards.',    state: 'off',    can: ['Send events to your account'],  },  {    id: 'pagerduty',    name: 'PagerDuty',    summary:      'Page the on-call person when a deploy fails.',    state: 'off',    can: ['Open incidents'],  },  {    id: 'sentry',    name: 'Sentry',    summary:      'Tie new errors to the deploy that caused them.',    state: 'connected',    detail: 'Kerf · 4 projects',    can: ['Read releases'],  },]const wait = (ms: number) =>  new Promise<void>((done) => {    setTimeout(done, ms)  })