mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 07:20:43 +00:00
zeekay
11265a21fd
Code on hanzo.ai was plain monospace: 285 blocks across 200 pages, one of them hand-inked in four greys. components/code now renders each sample at build with shiki and @hanzo/ui's codeTheme (Dracula dark, GitHub Light light), every colour written as light-dark() so the page's color-scheme picks it, on the theme's own ground. The page ships the coloured spans and no highlighter; e2e/gates/code.spec.ts holds both. A client page that shows code is split into a server page.tsx that owns the sample and a client view.tsx that takes the highlighted node: ProductLanding's code.source, the blockchain pages' codeExamples, the models kit Sample, the guest-key card, realtime, analytics, payments, sdks and the rest. Transcripts, agent prompts and ASCII diagrams are not code and keep their markup. Takes @hanzo/ui 8.27.83 for codeTheme and @hanzo/design 0.5.35 with it, regenerates app/gui.css for the new theme keys, and lowers the raw-colour allowance to 58: the samples' literal inks are gone.
130 lines
3.8 KiB
TypeScript
130 lines
3.8 KiB
TypeScript
'use client'
|
|
|
|
import { useState, type ReactNode } from 'react'
|
|
import { Check, Copy, Terminal, Zap } from 'lucide-react'
|
|
import { Box, Text, XStack } from '@/components/ui'
|
|
|
|
interface GuestKeyBannerProps {
|
|
title?: string
|
|
/** The request, as text for the clipboard. */
|
|
command: string
|
|
/** The same request highlighted by the server page (components/models/guest). */
|
|
sample: ReactNode
|
|
}
|
|
|
|
/** The card's lift off the page: a soft drop in the black of the palette. */
|
|
const DROP = '0 4px 20px -2px color-mix(in srgb, var(--pure-black) 30%, transparent)'
|
|
|
|
/** The mono caption every small label in the card shares. */
|
|
const CAPTION = { fontFamily: '$mono', fontSize: '$1', color: 'var(--muted-foreground)' } as const
|
|
|
|
export function GuestKeyBanner({ title = 'Instant Guest API Key', command, sample }: GuestKeyBannerProps) {
|
|
const [copied, setCopied] = useState(false)
|
|
|
|
const handleCopy = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(command)
|
|
setCopied(true)
|
|
setTimeout(() => setCopied(false), 2000)
|
|
} catch {
|
|
// Fallback
|
|
}
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
rounded="var(--radius-2xl)"
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
overflow="hidden"
|
|
p="$4"
|
|
$sm={{ p: '$5' }}
|
|
bg="var(--card)"
|
|
boxShadow={DROP}
|
|
>
|
|
<XStack items="center" justify="space-between" mb="$3" flexWrap="wrap" gap="$2">
|
|
<XStack items="center" gap="$2">
|
|
<Text
|
|
display="inline-flex"
|
|
items="center"
|
|
justify="center"
|
|
width={22}
|
|
height={22}
|
|
rounded="var(--radius-full)"
|
|
bg="var(--glass-strong)"
|
|
color="var(--state-online)"
|
|
>
|
|
<Zap size={13} fill="currentColor" />
|
|
</Text>
|
|
{/* --tracking-tight at this size: -0.025em of 13px. */}
|
|
<Text fontSize="$2" fontWeight="600" color="var(--foreground)" letterSpacing={-0.33}>
|
|
{title}
|
|
</Text>
|
|
<Text
|
|
{...CAPTION}
|
|
px={8}
|
|
py={2}
|
|
rounded="var(--radius-full)"
|
|
bg="var(--glass)"
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
>
|
|
guest_temp_key
|
|
</Text>
|
|
</XStack>
|
|
|
|
<Text fontSize="$1" color="var(--muted-foreground)">
|
|
No account or sign up required
|
|
</Text>
|
|
</XStack>
|
|
|
|
<Text render="p" display="block" fontSize="$1" color="var(--muted-foreground)" mb={12}>
|
|
Test right now from your terminal. No credentials needed:
|
|
</Text>
|
|
|
|
<Box
|
|
position="relative"
|
|
rounded="var(--radius-xl)"
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
bg="var(--background)"
|
|
overflow="hidden"
|
|
>
|
|
<XStack
|
|
items="center"
|
|
justify="space-between"
|
|
borderBottomWidth={1}
|
|
borderColor="var(--border)"
|
|
bg="$panel"
|
|
px="$3"
|
|
py="$1.5"
|
|
>
|
|
<XStack items="center" gap="$2">
|
|
<Terminal size={13} color="var(--muted-foreground)" />
|
|
<Text {...CAPTION}>cURL ยท instant guest request</Text>
|
|
</XStack>
|
|
<Text
|
|
render={<button type="button" onClick={handleCopy} title="Copy command to clipboard" />}
|
|
{...CAPTION}
|
|
color={copied ? 'var(--state-online)' : 'var(--muted-foreground)'}
|
|
display="inline-flex"
|
|
items="center"
|
|
gap={4}
|
|
px={8}
|
|
py={2}
|
|
rounded="var(--radius-md)"
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
bg="var(--glass)"
|
|
cursor="pointer"
|
|
>
|
|
{copied ? <Check size={12} /> : <Copy size={12} />}
|
|
{copied ? 'Copied' : 'Copy'}
|
|
</Text>
|
|
</XStack>
|
|
{sample}
|
|
</Box>
|
|
</Box>
|
|
)
|
|
}
|