mirror of
https://github.com/hanzo-apps/hanzo.ai.git
synced 2026-10-30 14:58:08 +00:00
zeekay
b8fd78fbc7
The owner, 2026-10-30: keep the "?" corner, it holds help, theme, language and fonts; the language switcher also stands top right. components/shell/help.tsx, its mount, its gate and the composer's clearance return as they were; LLM.md says the language is chosen in both places. A section label under a pointer brightens its words to the ink while its outline stays soft; the light sweeps across once and the sparkle quickens. No lift, no glow.
77 lines
2.7 KiB
TypeScript
77 lines
2.7 KiB
TypeScript
import type { ReactNode } from 'react'
|
|
import Link from 'next/link'
|
|
import { ChevronRight, Sparkles } from 'lucide-react'
|
|
import { Text, View } from '@/components/ui'
|
|
|
|
/*
|
|
* No client directive: a server component renders it as it stands (/enso's
|
|
* kicker), without the rest of ./chrome and the dot field riding along. So gui
|
|
* comes through @/components/ui, the barrel a server component may name.
|
|
*/
|
|
|
|
/**
|
|
* A section's name as a rounded pill: a soft outline on no ground, mono, its
|
|
* case as written. A filled pill is a button's look, so a name is not one. Under
|
|
* a pointer its words brighten to the page's ink, a light sweeps across it once
|
|
* and its sparkle quickens; the outline stays soft (`[data-label]` in
|
|
* app/layout.tsx).
|
|
*
|
|
* With `href` it is a link: a twinkling sparkle in the pill's ink leads it, a light crosses it every
|
|
* few seconds and a chevron closes it (`[data-shine]` in app/layout.tsx), all
|
|
* still under reduced motion.
|
|
*/
|
|
export function Label({ children, center, href }: { children: ReactNode; center?: boolean; href?: string }) {
|
|
return (
|
|
<View
|
|
self={center ? 'center' : 'flex-start'}
|
|
display="inline-flex"
|
|
flexDirection="row"
|
|
items="center"
|
|
justify="center"
|
|
gap={6}
|
|
px={12}
|
|
py={4}
|
|
rounded={9999}
|
|
bg="transparent"
|
|
borderWidth={1}
|
|
borderColor="var(--border-strong)"
|
|
position="relative"
|
|
overflow="hidden"
|
|
data-label=""
|
|
data-shine={href ? '' : undefined}
|
|
render={href ? <Link href={href} /> : undefined}
|
|
$platform-web={{ borderRadius: '9999px', display: 'inline-flex', width: 'fit-content', textDecoration: 'none' }}
|
|
>
|
|
{href && <Sparkles data-spark="" size={12} strokeWidth={2.4} color="var(--muted-foreground)" aria-hidden />}
|
|
<Text
|
|
fontFamily="$mono"
|
|
fontSize="$1"
|
|
lineHeight="$1"
|
|
color="var(--muted-foreground)"
|
|
fontWeight="600"
|
|
>
|
|
{children}
|
|
</Text>
|
|
{href && <ChevronRight size={12} strokeWidth={2.4} color="var(--muted-foreground)" aria-hidden data-i18n-mirror />}
|
|
</View>
|
|
)
|
|
}
|
|
|
|
/**
|
|
* A link's words and the arrow typed after them ("… →"). The arrow stays out of
|
|
* the sentence a translator reads and turns on a right-to-left page
|
|
* (`data-i18n-mirror`), in a box of its own because a transform does not reach an
|
|
* inline run. One span, so the space before the arrow is the line's, as it was
|
|
* when both were one string.
|
|
*/
|
|
export function Onward({ children, arrow = '→' }: { children: ReactNode; arrow?: string }) {
|
|
return (
|
|
<span>
|
|
{children}{' '}
|
|
<Text render="span" color="inherit" aria-hidden data-i18n-mirror $platform-web={{ display: 'inline-block' }}>
|
|
{arrow}
|
|
</Text>
|
|
</span>
|
|
)
|
|
}
|