mirror of
https://github.com/zooai/design.git
synced 2026-10-30 14:50:04 +00:00
zeekay
8e572430a8
Monochrome, dark by default. One hue rendered through an opacity ladder. Tokens (color, type, spacing, radius, elevation, motion) + core/forms/navigation/ overlays components + brand guidelines + ui kit. The single source of truth for every Zoo surface — loadable and editable.
32 lines
2.8 KiB
HTML
32 lines
2.8 KiB
HTML
<!-- @dsCard group="Components" viewport="700x300" name="Navigation" subtitle="Tabs and Accordion" -->
|
|
<!doctype html><html class="dark"><head><meta charset="utf-8"><title>Navigation components</title>
|
|
<link rel="stylesheet" href="../../styles.css">
|
|
<script src="https://unpkg.com/[email protected]/umd/react.development.js" integrity="sha384-hD6/rw4ppMLGNu3tX5cjIb+uRZ7UkRJ6BPkLpg4hAu/6onKUg4lLsHAs9EBPT82L" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" integrity="sha384-u6aeetuaXnQ38mYT8rp6sbXaQe3NL9t+IBXmnYxwkUI2Hw4bsp2Wvmx4yRQF1uAm" crossorigin="anonymous"></script>
|
|
<script src="https://unpkg.com/@babel/[email protected]/babel.min.js" integrity="sha384-m08KidiNqLdpJqLq95G/LEi8Qvjl/xUYll3QILypMoQ65QorJ9Lvtp2RXYGBFj1y" crossorigin="anonymous"></script>
|
|
<script src="../../_ds_bundle.js"></script>
|
|
<style>body{margin:0;padding:20px;background:#000;font-family:var(--font-sans)}pre{margin:0;padding:16px;background:var(--card);border:1px solid var(--border-hairline);border-radius:var(--radius-lg);font-size:12px;line-height:1.7;color:var(--neutral-300);overflow:auto}</style></head>
|
|
<body><div id="root"></div>
|
|
<script type="text/babel">
|
|
const { Tabs, TabsList, TabsTrigger, TabsContent, Accordion, AccordionItem } = window.ZooDesignSystem_0a9445;
|
|
const TS = "import Zoo from '@zoo/cloud'\n\nconst zoo = new Zoo()\nawait zoo.chat.completions.create({\n model: 'zoo-pro',\n messages: [{ role: 'user', content: 'Hi' }],\n})";
|
|
const PY = "from zoo import Zoo\n\nzoo = Zoo()\nzoo.chat.completions.create(\n model=\"zoo-pro\",\n messages=[{\"role\": \"user\", \"content\": \"Hi\"}],\n)";
|
|
const SH = "curl https://api.zoo.ngo/v1/chat/completions \\\n -H \"Authorization: Bearer $ZOO_API_KEY\" \\\n -d '{\"model\":\"zoo-pro\"}'";
|
|
function Demo(){
|
|
return (<div style={{display:'grid',gridTemplateColumns:'1fr 1fr',gap:24}}>
|
|
<Tabs defaultValue="ts">
|
|
<TabsList><TabsTrigger value="ts">TypeScript</TabsTrigger><TabsTrigger value="py">Python</TabsTrigger><TabsTrigger value="sh">cURL</TabsTrigger></TabsList>
|
|
<TabsContent value="ts"><pre>{TS}</pre></TabsContent>
|
|
<TabsContent value="py"><pre>{PY}</pre></TabsContent>
|
|
<TabsContent value="sh"><pre>{SH}</pre></TabsContent>
|
|
</Tabs>
|
|
<Accordion defaultValue="q1">
|
|
<AccordionItem value="q1" title="How is usage billed?">Per token, metered hourly. You pay only for what you use.</AccordionItem>
|
|
<AccordionItem value="q2" title="Can I self-host?">Yes. Every service in the Zoo cloud is open source.</AccordionItem>
|
|
<AccordionItem value="q3" title="Which models are available?">Zen open weights, plus Zoo Flash, Pro, and Ultra.</AccordionItem>
|
|
</Accordion>
|
|
</div>)
|
|
}
|
|
ReactDOM.createRoot(document.getElementById('root')).render(<Demo />);
|
|
</script></body></html>
|