mirror of
https://github.com/luxfi/forum.git
synced 2026-09-24 00:24:25 +00:00
zeekayandHanzo Dev
17bd239f2a
Tailwind 4 out — the engine import, the `@custom-variant`, and the `@theme inline` wrapper. The tokens inside it were always plain custom properties and are untouched; what goes is the thing that was reading them. Every class attribute now reaches a converter rather than the document: Box for an element, css for an icon, the component itself for anything from @hanzo/ui. The body's ground moves into the sheet, since <body> sits outside the provider and reads no classes. The library's sheets are imported from the LAYOUT rather than @import-ed from the app's CSS: a bare package specifier does not resolve in this pipeline and the failure is silent — the whole file is dropped, so every token goes missing and the page renders on browser defaults. Also on the current toolchain: React 19.2.8, Next 16.3.3, TypeScript 7. Measured at 390px and 1280px: 4/4 page-widths clean, nothing unread. Co-authored-by: Hanzo Dev <[email protected]>
64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import { getMenuBarSVG, getWhiteSVG, getMonoSVG, getColorSVG } from '@luxfi/logo';
|
|
import { Box } from '@hanzo/ui'
|
|
|
|
interface LogoProps {
|
|
size?: number;
|
|
className?: string;
|
|
variant?: 'default' | 'white' | 'mono' | 'color';
|
|
}
|
|
|
|
export function Logo({ size = 24, className = '', variant = 'default' }: LogoProps) {
|
|
let svg: string;
|
|
switch (variant) {
|
|
case 'white':
|
|
svg = getWhiteSVG();
|
|
break;
|
|
case 'mono':
|
|
svg = getMonoSVG();
|
|
break;
|
|
case 'color':
|
|
svg = getColorSVG();
|
|
break;
|
|
default:
|
|
svg = getMenuBarSVG();
|
|
}
|
|
|
|
return (
|
|
<Box
|
|
className={`logo-container inline-block ${className}`}
|
|
style={{ width: size, height: size }}
|
|
dangerouslySetInnerHTML={{ __html: svg }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function LogoWithText({ size = 24, text = 'Forum' }: { size?: number; text?: string }) {
|
|
return (
|
|
<Box className="flex items-center gap-2 group logo-with-text">
|
|
<Logo
|
|
size={size}
|
|
className="transition-transform duration-200 group-hover:scale-110"
|
|
/>
|
|
<Box className="relative h-6">
|
|
<Box tag="span" className="font-bold text-lg inline-block transition-all duration-300 ease-out group-hover:opacity-0 group-hover:-translate-y-full">
|
|
{text}
|
|
</Box>
|
|
<Box tag="span" className="font-bold text-lg absolute left-0 top-0 opacity-0 translate-y-full transition-all duration-300 ease-out group-hover:opacity-100 group-hover:translate-y-0 whitespace-nowrap">
|
|
Lux {text}
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export function LogoStatic({ size = 24, text = 'Forum' }: { size?: number; text?: string }) {
|
|
return (
|
|
<Box className="flex items-center gap-2">
|
|
<Logo size={size} />
|
|
<Box tag="span" className="font-bold text-lg">{text}</Box>
|
|
</Box>
|
|
);
|
|
}
|