684f929f28
- Add project configuration and git ignore rules - Implement App router with protected routes - Develop course player, grid, and card components - Add state management for course progress and navigation - Initialize database services for course and comment data
89 lines
2.6 KiB
TypeScript
89 lines
2.6 KiB
TypeScript
import React from 'react';
|
|
|
|
interface LogoProps {
|
|
variant?: 'dark' | 'light'; // 'dark' = fundo escuro (compor branco + HUB laranja) | 'light' = fundo claro (compor escuro + HUB laranja)
|
|
className?: string;
|
|
size?: 'sm' | 'md' | 'lg' | 'xl';
|
|
showSymbolOnly?: boolean;
|
|
}
|
|
|
|
export const Logo: React.FC<LogoProps> = ({
|
|
variant = 'dark',
|
|
className = '',
|
|
size = 'md',
|
|
showSymbolOnly = false,
|
|
}) => {
|
|
const isDark = variant === 'dark';
|
|
|
|
// Sizing styles
|
|
const textSizes = {
|
|
sm: 'text-xl',
|
|
md: 'text-2xl',
|
|
lg: 'text-3xl',
|
|
xl: 'text-4xl',
|
|
};
|
|
|
|
const dotSizes = {
|
|
sm: { r: 2.5, gap: 'gap-1', w: 'w-4' },
|
|
md: { r: 3.5, gap: 'gap-1', w: 'w-5' },
|
|
lg: { r: 4.5, gap: 'gap-1.5', w: 'w-6' },
|
|
xl: { r: 5.5, gap: 'gap-2', w: 'w-8' },
|
|
};
|
|
|
|
if (showSymbolOnly) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 36 30"
|
|
className={`${size === 'sm' ? 'h-5' : size === 'md' ? 'h-6' : size === 'lg' ? 'h-8' : 'h-10'} w-auto inline-block ${className}`}
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
aria-label="Compor HUB"
|
|
>
|
|
<circle cx="10" cy="8" r="6" fill="#EA721D" />
|
|
<circle cx="26" cy="8" r="6" fill="#EA721D" />
|
|
<circle cx="18" cy="22" r="6" fill="#EA721D" />
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`inline-flex items-center select-none font-sans font-black tracking-tighter leading-none ${className}`}
|
|
>
|
|
{/* "compor" */}
|
|
<span
|
|
className={`${textSizes[size]} font-black ${
|
|
isDark ? 'text-white' : 'text-[#222222]'
|
|
} tracking-[-0.04em]`}
|
|
style={{ fontFamily: "system-ui, -apple-system, 'Montserrat', 'Segoe UI', Roboto, sans-serif" }}
|
|
>
|
|
compor
|
|
</span>
|
|
|
|
{/* 3 Orange Dots Icon - Floating elevated between compor & HUB */}
|
|
<div className="inline-flex flex-col items-center justify-center mx-1.5 self-start pt-0.5">
|
|
<svg
|
|
viewBox="0 0 34 28"
|
|
className={`${size === 'sm' ? 'h-3' : size === 'md' ? 'h-4' : size === 'lg' ? 'h-5' : 'h-6'} w-auto`}
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<circle cx="9" cy="7" r="5.5" fill="#EA721D" />
|
|
<circle cx="25" cy="7" r="5.5" fill="#EA721D" />
|
|
<circle cx="17" cy="20.5" r="5.5" fill="#EA721D" />
|
|
</svg>
|
|
</div>
|
|
|
|
{/* "HUB" */}
|
|
<span
|
|
className={`${textSizes[size]} font-black text-[#EA721D] tracking-normal`}
|
|
style={{ fontFamily: "system-ui, -apple-system, 'Montserrat', 'Segoe UI', Roboto, sans-serif" }}
|
|
>
|
|
HUB
|
|
</span>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Logo;
|