mirror of
https://github.com/karpathy/nanochat.git
synced 2026-05-31 20:18:09 +00:00
634be4080b
Build services/frontend/ replacing the legacy nanochat/ui.html single-file UI. Landing, login, and chat pages ported with full design system: Devanagari + Great Vibes hero, samosa/chai/toran SVG animations, gold/cream palette. - App Router pages: / (hero + floating illustrations), /login (split-screen OAuth with mandala motif), /chat (260px collapsible sidebar, suggestion chips, markdown + code-copy, auto-expanding input, slash commands) - SSE streaming via useSSE hook and /api/chat/stream BFF route (proxies to CHAT_API_URL when set, falls back to mock echo for local dev) - NextAuth.js v5 with Google + GitHub providers; middleware gates /chat/* - Zustand store with localStorage persistence for conversations/settings - Tailwind theme carries all ui.html tokens + keyframes (pendulum, float, wobble, steamFloat, steamType); SVG assets componentized under components/svg - Multi-stage node:20-alpine Dockerfile with Next standalone output Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
16 lines
1013 B
TypeScript
16 lines
1013 B
TypeScript
export default function KettleSteam({ className = '' }: { className?: string }) {
|
|
return (
|
|
<svg className={`absolute -top-10 -right-2 pointer-events-none ${className}`} viewBox="0 0 60 55" width={60} height={55} aria-hidden="true">
|
|
<g style={{ transformBox: 'fill-box', transformOrigin: 'bottom center' }} className="animate-steam-1">
|
|
<path d="M15,48 Q10,36 18,26 Q26,16 18,4" stroke="#aaa" strokeWidth="2" fill="none" strokeLinecap="round" opacity="0.4" />
|
|
</g>
|
|
<g style={{ transformBox: 'fill-box', transformOrigin: 'bottom center' }} className="animate-steam-2">
|
|
<path d="M30,48 Q36,36 28,26 Q20,16 28,4" stroke="#bbb" strokeWidth="1.8" fill="none" strokeLinecap="round" opacity="0.3" />
|
|
</g>
|
|
<g style={{ transformBox: 'fill-box', transformOrigin: 'bottom center' }} className="animate-steam-3">
|
|
<path d="M45,48 Q40,36 46,28 Q52,18 44,6" stroke="#aaa" strokeWidth="1.5" fill="none" strokeLinecap="round" opacity="0.3" />
|
|
</g>
|
|
</svg>
|
|
);
|
|
}
|