mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekayandGitHub
3df66c3990
Pages from /machines to /risk, the model pages, and the kits they are made of
(page-kit, ProductLanding, LayerPage, Stack, the models kit, band's Head) mark
authored copy where it is written and draw it in the reader's language. A server
page marks a literal phrase('…') or wraps it in <T>; a client page calls t. The
kits translate a string prop through useSay (components/marketing/say), so a
page passes phrase('…') and markup passes as written. An arrow that points
turns over right to left (data-i18n-mirror).
Rebased on main: the fold-based heroes (Fold, PageHero, MachinesHero, the
product and layer pages) keep main's structure and copy, with their label,
title and lede marked phrase. /platform is main's CloudLanding; the deleted
/platform/layers and the old referral components stay deleted.
Claude-Session: https://claude.ai/code/session_015XYKLjZtDTJEnMo4eK3AFH
49 lines
1.8 KiB
TypeScript
49 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'
|
|
import { T } from '@hanzo/i18n/react'
|
|
|
|
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">
|
|
<T>{l.label}</T>
|
|
{away ? ' ↗' : ''}
|
|
</Text>
|
|
</XStack>
|
|
)
|
|
})}
|
|
</XStack>
|
|
)
|
|
}
|