Chip

import { state } from '@kerf-js/core'import { Chip, Row } from '@kerf-js/veneer'export function Icons() {  const mine = state(true)  const starred = state(false)  return (    <Row gap="tight">      <Chip        icon="user"        pressed={mine.value}        onClick={() => (mine.value = !mine.value)}      >        Mine      </Chip>      <Chip        icon="star"        pressed={starred.value}        onClick={() => (starred.value = !starred.value)}      >        Starred      </Chip>    </Row>  )}

import { state } from '@kerf-js/core'import { Chip, Row, Stack, Text } from '@kerf-js/veneer'export function FilterList() {  const on = state(['Failed', 'Building'])  const flip = (name: string) =>    (on.value = on.value.includes(name)      ? on.value.filter((n) => n !== name)      : [...on.value, name])  const shown = () => {    const matches = PROJECTS.filter(      (p) =>        !on.value.length || on.value.includes(p.status),    )    return matches.slice(0, 4)  }  return (    <Stack gap="group">      <Row gap="tight">        {['Live', 'Building', 'Failed'].map((name) => (          <Chip            key={name}            pressed={on.value.includes(name)}            onClick={() => flip(name)}          >            {name}          </Chip>        ))}      </Row>      <Stack gap="tight">        {shown().map((p) => (          <Row            key={p.id}            justify="between"          >            <Text>{p.name}</Text>            <Text subtle>{p.status}</Text>          </Row>        ))}      </Stack>    </Stack>  )}type Status =  | 'Live'  | 'Building'  | 'Failed'  | 'Paused'const PROJECTS: {  id: string  name: string  owner: string  region: string  status: Status  deploys: number  uptime: number  latency: number  cost: number  updated: string}[] = [  {    id: 'storefront',    name: 'storefront',    owner: 'Priya Raman',    region: 'eu-west',    status: 'Live',    deploys: 412,    uptime: 99.98,    latency: 84,    cost: 1240,    updated: '2026-10-31',  },  {    id: 'checkout',    name: 'checkout',    owner: 'Tomás Oliveira',    region: 'eu-west',    status: 'Live',    deploys: 288,    uptime: 99.95,    latency: 112,    cost: 980,    updated: '2026-10-31',  },  {    id: 'search-api',    name: 'search-api',    owner: 'Lena Fischer',    region: 'us-east',    status: 'Building',    deploys: 196,    uptime: 99.91,    latency: 146,    cost: 1610,    updated: '2026-10-30',  },  {    id: 'billing',    name: 'billing',    owner: 'Mara Lindqvist',    region: 'us-east',    status: 'Live',    deploys: 154,    uptime: 99.99,    latency: 73,    cost: 720,    updated: '2026-10-29',  },  {    id: 'mobile-bff',    name: 'mobile-bff',    owner: 'Sam Okafor',    region: 'ap-south',    status: 'Failed',    deploys: 233,    uptime: 99.42,    latency: 208,    cost: 860,    updated: '2026-10-29',  },  {    id: 'notifier',    name: 'notifier',    owner: 'Jun Tanaka',    region: 'eu-north',    status: 'Live',    deploys: 97,    uptime: 99.97,    latency: 58,    cost: 310,    updated: '2026-10-27',  },  {    id: 'reports',    name: 'reports',    owner: 'Noor Haddad',    region: 'us-west',    status: 'Paused',    deploys: 41,    uptime: 99.8,    latency: 321,    cost: 190,    updated: '2026-10-22',  },  {    id: 'edge-cache',    name: 'edge-cache',    owner: 'Jun Tanaka',    region: 'global',    status: 'Live',    deploys: 318,    uptime: 100,    latency: 21,    cost: 1430,    updated: '2026-10-31',  },  {    id: 'auth',    name: 'auth',    owner: 'Mara Lindqvist',    region: 'eu-west',    status: 'Live',    deploys: 176,    uptime: 99.99,    latency: 66,    cost: 540,    updated: '2026-10-28',  },  {    id: 'ingest',    name: 'ingest',    owner: 'Lena Fischer',    region: 'us-east',    status: 'Live',    deploys: 264,    uptime: 99.93,    latency: 131,    cost: 2120,    updated: '2026-10-30',  },]