Nav

import { state } from '@kerf-js/core'import { Nav } from '@kerf-js/veneer'export function Down() {  const at = state('Deploys')  const go = (e: Event, name: string) => {    e.preventDefault()    at.value = name  }  return (    <Nav      label="Project"      axis="y"    >      {PAGES.map((name) => (        <a          key={name}          href={`#${name}`}          aria-current={            at.value === name ? 'page' : undefined          }          onClick={(e) => go(e, name)}        >          {name}        </a>      ))}    </Nav>  )}const PAGES = [  'Overview',  'Deploys',  'Logs',  'Settings',]

import { state } from '@kerf-js/core'import {  Button,  Heading,  Nav,  Row} from '@kerf-js/veneer'export function ProductHeader() {  const at = state('Deploys')  const go = (e: Event, name: string) => {    e.preventDefault()    at.value = name  }  return (    <Row      justify="between"      gap="section"    >      <Row gap="section">        <Heading level={3}>kerf</Heading>        <Nav label="Main">          {PAGES.map((name) => (            <a              key={name}              href={`#${name}`}              aria-current={                at.value === name ? 'page' : undefined              }              onClick={(e) => go(e, name)}            >              {name}            </a>          ))}        </Nav>      </Row>      <Button        size="sm"        icon="rocket"      >        Deploy      </Button>    </Row>  )}const PAGES = [  'Overview',  'Deploys',  'Logs',  'Settings',]

import { state } from '@kerf-js/core'import {  Heading,  Nav,  Split,  Stack,  Text} from '@kerf-js/veneer'export function Settings() {  const at = state('General')  const go = (e: Event, name: string) => {    e.preventDefault()    at.value = name  }  return (    <Split      side="start"      width="rail"      gap="section"    >      <Nav        label="Settings"        axis="y"      >        {['General', 'Domains', 'Billing', 'Team'].map(          (name) => (            <a              key={name}              href={`#${name}`}              aria-current={                at.value === name ? 'page' : undefined              }              onClick={(e) => go(e, name)}            >              {name}            </a>          ),        )}      </Nav>      <Stack gap="related">        <Heading level={3}>{at.value}</Heading>        <Text subtle>          Everything about {at.value.toLowerCase()} for          this project lives here.        </Text>      </Stack>    </Split>  )}

import {  Heading,  Nav,  Split,  Stack,  Text} from '@kerf-js/veneer'export function Contents() {  return (  <Split    side="start"    width="rail"    gap="section"  >    <Nav      label="On this page"      axis="y"      spy    >      <a href="#toc-build">Build</a>      <a href="#toc-deploy">Deploy</a>      <a href="#toc-roll-back">Roll back</a>    </Nav>    <Stack gap="section">      <Stack gap="tight">        <Heading          level={3}          id="toc-build"        >          Build        </Heading>        <Text subtle>          Every push runs your build command in a clean          machine. Dependencies are cached between runs,          so the second build is much faster than the          first.        </Text>      </Stack>      <Stack gap="tight">        <Heading          level={3}          id="toc-deploy"        >          Deploy        </Heading>        <Text subtle>          A finished build goes to each region in turn.          New traffic moves over once the health check          passes, and old requests are left to finish.        </Text>      </Stack>      <Stack gap="tight">        <Heading          level={3}          id="toc-roll-back"        >          Roll back        </Heading>        <Text subtle>          Every deploy stays ready to serve. Promote an          older one and traffic moves back in about ten          seconds, with no new build.        </Text>      </Stack>    </Stack>  </Split>  )}