mirror of
https://github.com/hanzoai/agents.git
synced 2026-10-30 18:48:36 +00:00
zeekay
dc00ea93d0
This example shipped a live tailwind pipeline (tailwind.config.ts, a postcss
config running the tailwind plugin, @tailwind directives in globals.css), ten
@radix-ui packages, and fourteen vendored shadcn components. Tailwind classes
and radix primitives are DOM-only, so the example taught readers a pattern that
cannot run on iOS or Android — and examples propagate.
Everything now renders through @hanzo/ui on the @hanzo/gui backend, which
compiles to React Native. Utility strings became style props on View/XStack/
YStack/Text; the vendored ui/ directory is gone because @hanzo/ui already
exports every primitive it re-implemented, with matching variant names.
Tailwind and @hanzo/ui cannot coexist: @hanzo/ui ships plain CSS cascade layers
and tailwind's postcss plugin rejects `@layer base` without `@tailwind base`.
The pipeline had to come out for the library to load at all, which is why this
is a whole-app change rather than a partial one.
Also removed EvaluationForm.tsx — 273 lines of tailwind nothing imported.
Platform moves the conversion required: React 18 -> 19 and Next 14 -> 15 for
@hanzo/ui's peer range, react-native aliased to react-native-web for the web
bundle, and <Hanzo> mounted in the root layout to install the theme.
Three defects found by rendering it rather than trusting the build:
- Tabs defaults to flexDirection row, so tab panels laid out beside the tab
list and spilled outside the metric cards
- TabsContent computes flex 1 1 0, which collapses to height 0 inside a
content-sized column; it needs flexBasis auto there
- CollapsibleTrigger has no asChild — it wraps children itself, so the claim
rows rendered as empty boxes
Measured: 1465 tailwind utility tokens across 22 files -> 0; 10 radix packages
-> 0; 14 vendored shadcn files -> 0. next build green, tsc --noEmit clean,
every tab and the claim expand/collapse verified in a real browser with no
console errors.
26 lines
730 B
TypeScript
26 lines
730 B
TypeScript
'use client'
|
|
|
|
import Image from 'next/image'
|
|
import { Anchor, Text, XStack } from '@hanzo/ui'
|
|
import type { ComponentProps } from 'react'
|
|
|
|
export function PoweredBy(props: ComponentProps<typeof XStack>) {
|
|
return (
|
|
<XStack {...props}>
|
|
<Anchor
|
|
href="https://github.com/hanzoai/agents"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
textDecorationLine="none"
|
|
>
|
|
<XStack alignItems="center" gap="$2" opacity={0.8} hoverStyle={{ opacity: 1 }}>
|
|
<Text fontSize={12} color="$color11">
|
|
Powered by
|
|
</Text>
|
|
<Image src="/hanzo-agents-logo-dark.svg" alt="Hanzo Agents" width={80} height={16} />
|
|
</XStack>
|
|
</Anchor>
|
|
</XStack>
|
|
)
|
|
}
|