mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-28 07:32:52 +00:00
zeekay
8bf2e0cfab
Every model page opens in the family pages' frame (the name, one line, two actions) over a links row: the model's GitHub and Hugging Face, from its catalogue record and kept only when the build reads a 200, and this site's leaderboard and benchmarks for its family. Facts are a grid of labelled cells; a Kai page sets what ships today beside the Kai-1.7 target, each its own column. The quick start is a segmented control over TypeScript, Python, cURL and Go, in the shape the model's endpoint takes: a decision model's are the /v1/decisions severity call, each run against production and answered (the list-shaped body the card printed was refused 422). The guest key, which api.hanzo.ai no longer accepts, gives way to Get an API key. /kai's first action reads Get decisions, as the card's does.
76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
'use client'
|
|
|
|
/**
|
|
* A model page's quick start: one call, in four languages, one at a time.
|
|
*
|
|
* A segmented control over the samples, each sample the server page
|
|
* highlighted (components/code) under a bar with its copy control. Every
|
|
* sample is in the export; the control only chooses which one shows, so a
|
|
* reader without script reads the first and a crawler reads all four.
|
|
*/
|
|
|
|
import { useState, type ReactNode } from 'react'
|
|
import { Box, Text, XStack } from '@hanzo/ui'
|
|
import { CopyButton } from '@hanzo/ui/product'
|
|
|
|
export interface Sample {
|
|
/** The tab's label: TypeScript, Python, cURL, Go. */
|
|
lang: string
|
|
/** The text the copy control puts on the clipboard. */
|
|
code: string
|
|
/** The same text, highlighted where the page was built. */
|
|
sample: ReactNode
|
|
}
|
|
|
|
export function Samples({ samples }: { samples: readonly Sample[] }) {
|
|
const [on, setOn] = useState(0)
|
|
return (
|
|
<Box>
|
|
<XStack role="tablist" aria-label="Language" gap={4} p={4} mb="$3" rounded="var(--radius-full)" bg="var(--secondary)" self="flex-start" $platform-web={{ width: 'fit-content', maxWidth: '100%', overflowX: 'auto' }}>
|
|
{samples.map((s, i) => (
|
|
<Text
|
|
key={s.lang}
|
|
render={<button type="button" role="tab" aria-selected={i === on} aria-controls={`sample-${i}`} id={`tab-${i}`} onClick={() => setOn(i)} />}
|
|
px={14}
|
|
py={6}
|
|
rounded="var(--radius-full)"
|
|
borderWidth={0}
|
|
bg={i === on ? '$background' : 'transparent'}
|
|
color={i === on ? '$ink' : 'var(--muted-foreground)'}
|
|
fontSize="$2"
|
|
fontWeight={i === on ? '600' : '500'}
|
|
cursor="pointer"
|
|
whiteSpace="nowrap"
|
|
>
|
|
{s.lang}
|
|
</Text>
|
|
))}
|
|
</XStack>
|
|
{samples.map((s, i) => (
|
|
<Box
|
|
key={s.lang}
|
|
role="tabpanel"
|
|
id={`sample-${i}`}
|
|
aria-labelledby={`tab-${i}`}
|
|
hidden={i !== on}
|
|
display={i === on ? 'flex' : 'none'}
|
|
flexDirection="column"
|
|
overflow="hidden"
|
|
rounded="var(--radius-xl)"
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
bg="$background"
|
|
>
|
|
<XStack items="center" justify="space-between" px="$4" py="$2" borderBottomWidth={1} borderColor="var(--border)" bg="$panel">
|
|
<Text fontFamily="$mono" fontSize="$1" color="var(--muted-foreground)">
|
|
{s.lang}
|
|
</Text>
|
|
<CopyButton value={s.code} />
|
|
</XStack>
|
|
{s.sample}
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
)
|
|
}
|