mirror of
https://github.com/hanzoai/gui.git
synced 2026-11-03 00:13:54 +00:00
zeekay
f37a62f7ce
Every Hanzo surface reads @hanzo/design, @hanzo/tokens, @hanzo/appearance and @hanzo/font; this site set its own type, so its header, ramp and ground drifted from hanzo.ai and a reader's appearance settings reached nothing here. Gui's $n ladder now resolves through the design ramp, dark is the default, the chrome stays grey while the landing sections keep their tints, and everything below the fold loads as it nears the viewport. getFontSize reads the px fallback of a var() size, which is what keeps icon sizing numeric once sizes live on a ramp.
17 lines
751 B
TypeScript
17 lines
751 B
TypeScript
import { Suspense, useRef, type ReactNode } from 'react'
|
|
import { YStack } from '@hanzo/gui'
|
|
import { useIsIntersecting } from '~/hooks/useOnIntersecting'
|
|
|
|
// A section below the fold. Its code is a separate chunk, and it mounts once it
|
|
// comes within a screen of the viewport; `height` holds its room until then so
|
|
// the page does not shift and the tint observers see the right geometry.
|
|
export const Near = ({ height, children }: { height: number; children: ReactNode }) => {
|
|
const ref = useRef<HTMLElement>(null)
|
|
const near = useIsIntersecting(ref, { once: true, rootMargin: '900px' })
|
|
return (
|
|
<YStack ref={ref as any} minH={near ? 0 : height}>
|
|
{near ? <Suspense fallback={null}>{children}</Suspense> : null}
|
|
</YStack>
|
|
)
|
|
}
|