mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-29 07:20:43 +00:00
zeekay
b3eba940f5
components/code.tsx, a server component, imported Line from the @hanzo/ui/marketing barrel, which registers every marketing component (Plans, Faq, Hero, Media, ...) as a client entry of its route; the chunk of app/(marketing)/[...mod], which uses it, loads on every page, so every page carried them. components/models/Links.tsx, also a server component, imported the root barrel, about 150 client components onto every model page (605 KB against a 400 KB budget, and weight.spec red). Both now import through components/ui, which re-exports Line too. With the brand marks, a product page's first-party JavaScript goes from 404 KB to 383, /settings from 403 to 389, /bot from 416 to 397 and /board from 555 to 479. /kai (405) and /gen (403) stay over: their own page code and @hanzo/rooms' ProviderMark table.
48 lines
1.8 KiB
TypeScript
48 lines
1.8 KiB
TypeScript
/**
|
|
* A model page's links row (lib/models/links): GitHub and Hugging Face with
|
|
* their own marks, the leaderboard and the benchmarks with lucide's. Each is a
|
|
* pill in the page's hairline; one that leaves the site says so with ↗.
|
|
*/
|
|
|
|
import type { LucideIcon } from 'lucide-react'
|
|
import { BarChart3, Trophy } from 'lucide-react'
|
|
import { Text, XStack } from '@/components/ui'
|
|
import { Github, Huggingface } from '@/components/brand'
|
|
import type { Kind, Link } from '@/lib/models/links'
|
|
|
|
const MARK: Record<Kind, LucideIcon> = { github: Github, huggingface: Huggingface, leaderboard: Trophy, benchmarks: BarChart3 }
|
|
|
|
export function Links({ links, center }: { links: readonly Link[]; center?: boolean }) {
|
|
if (links.length === 0) return null
|
|
return (
|
|
<XStack render="nav" aria-label="Links" flexWrap="wrap" gap="$2" justify={center ? 'center' : 'flex-start'}>
|
|
{links.map((l) => {
|
|
const Mark = MARK[l.kind]
|
|
const away = l.href.startsWith('http')
|
|
return (
|
|
<XStack
|
|
key={l.kind}
|
|
render={<a href={l.href} {...(away ? { target: '_blank', rel: 'noopener noreferrer' } : {})} />}
|
|
data-link={l.kind}
|
|
items="center"
|
|
gap={8}
|
|
px={14}
|
|
py={7}
|
|
rounded="var(--radius-full)"
|
|
borderWidth={1}
|
|
borderColor="var(--border)"
|
|
$platform-web={{ color: 'var(--foreground)', textDecoration: 'none' }}
|
|
hoverStyle={{ borderColor: 'var(--muted-foreground)' }}
|
|
>
|
|
<Mark size={15} aria-hidden />
|
|
<Text fontSize="$2" lineHeight="$2" fontWeight="500" color="$ink">
|
|
{l.label}
|
|
{away ? ' ↗' : ''}
|
|
</Text>
|
|
</XStack>
|
|
)
|
|
})}
|
|
</XStack>
|
|
)
|
|
}
|