mirror of
https://github.com/hanzoai/hips.git
synced 2026-10-30 15:04:16 +00:00
zeekay
d5fd54788c
- Replace fake H SVG with official @hanzo/logo package (menubar variant) - Add empty slug to generateStaticParams so /docs index page is exported - Enable trailingSlash for GitHub Pages compatibility (/docs/ → /docs/index.html)
63 lines
1.7 KiB
TypeScript
63 lines
1.7 KiB
TypeScript
'use client';
|
|
|
|
import { getMenuBarSVG, getWhiteSVG, getMonoSVG, getColorSVG } from '@hanzo/logo';
|
|
|
|
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 (
|
|
<div
|
|
className={`logo-container inline-block ${className}`}
|
|
style={{ width: size, height: size }}
|
|
dangerouslySetInnerHTML={{ __html: svg }}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export function LogoWithText({ size = 24 }: { size?: number }) {
|
|
return (
|
|
<div className="flex items-center gap-2 group logo-with-text">
|
|
<Logo
|
|
size={size}
|
|
className="transition-transform duration-200 group-hover:scale-110"
|
|
/>
|
|
<div className="relative h-6">
|
|
<span className="font-bold text-lg inline-block transition-all duration-300 ease-out group-hover:opacity-0 group-hover:-translate-y-full">
|
|
HIPs
|
|
</span>
|
|
<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">
|
|
Hanzo Proposals
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export function LogoStatic({ size = 24, text = 'HIPs' }: { size?: number; text?: string }) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<Logo size={size} />
|
|
<span className="font-bold text-lg">{text}</span>
|
|
</div>
|
|
);
|
|
}
|