Spaces:
Running
Running
File size: 1,673 Bytes
09801ca | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 | /**
* DataVision Logo Component - Theme-aware
* Uses the official logo images with automatic light/dark mode switching
*/
import React from 'react';
import { useUserStore } from '../store/userStore';
interface LogoProps {
size?: 'sm' | 'md' | 'lg' | 'xl';
showText?: boolean;
className?: string;
}
const Logo: React.FC<LogoProps> = ({ size = 'md', showText = true, className = '' }) => {
const { isDark } = useUserStore();
const sizes = {
sm: { icon: 28, text: 'text-sm' },
md: { icon: 36, text: 'text-xl' },
lg: { icon: 48, text: 'text-2xl' },
xl: { icon: 64, text: 'text-3xl' },
};
const { icon, text } = sizes[size];
// Use dark logo for dark mode, light logo for light mode
const logoSrc = isDark ? '/datavision-logo-dark.jpg' : '/datavision-logo-light.jpg';
return (
<div className={`flex items-center gap-3 ${className}`}>
{/* Logo Image */}
<img
src={logoSrc}
alt="DataVision Logo"
width={icon}
height={icon}
className="flex-shrink-0"
style={{
width: icon,
height: icon,
objectFit: 'contain',
borderRadius: '6px',
}}
/>
{/* Dynamic Text - Data(Theme) + Vision(Green) */}
{showText && (
<div className={`font-bold ${text} tracking-tight flex items-center`}>
<span style={{ color: 'var(--text-primary)', fontFamily: "'Outfit', sans-serif" }}>
Data
</span>
<span className="text-emerald-500" style={{ fontFamily: "'Outfit', sans-serif" }}>
Vision
</span>
</div>
)}
</div>
);
};
export default Logo;
|