100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
|
|
interface LogoProps {
|
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
|
|
showText?: boolean;
|
|
className?: string;
|
|
variant?: 'light' | 'dark' | 'color';
|
|
}
|
|
|
|
export default function Logo({
|
|
size = 'md',
|
|
showText = true,
|
|
className = '',
|
|
variant = 'color',
|
|
}: LogoProps) {
|
|
const sizeClasses = {
|
|
xs: 'w-6 h-6', // 24px - 超小尺寸
|
|
sm: 'w-10 h-10', // 40px - 小尺寸
|
|
md: 'w-14 h-14', // 56px - 中等尺寸
|
|
lg: 'w-20 h-20', // 80px - 大尺寸
|
|
xl: 'w-24 h-24', // 96px - 特大尺寸
|
|
'2xl': 'w-32 h-32', // 128px - 超大尺寸
|
|
};
|
|
|
|
const textSizeClasses = {
|
|
xs: 'text-sm',
|
|
sm: 'text-lg',
|
|
md: 'text-xl',
|
|
lg: 'text-2xl',
|
|
xl: 'text-3xl',
|
|
'2xl': 'text-4xl',
|
|
};
|
|
|
|
const colorClasses = {
|
|
light: 'text-white',
|
|
dark: 'text-gray-900',
|
|
color: 'text-blue-700',
|
|
};
|
|
|
|
// 根据variant调整logo的滤镜效果
|
|
const getImageFilter = () => {
|
|
switch (variant) {
|
|
case 'light':
|
|
return 'brightness(0) invert(1)'; // 白色效果
|
|
case 'dark':
|
|
return 'brightness(0)'; // 黑色效果
|
|
case 'color':
|
|
default:
|
|
return 'none'; // 保持原色
|
|
}
|
|
};
|
|
|
|
const getImageOpacity = () => {
|
|
switch (variant) {
|
|
case 'light':
|
|
return 'opacity-90';
|
|
case 'dark':
|
|
return 'opacity-80';
|
|
case 'color':
|
|
default:
|
|
return 'opacity-100';
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className={`flex items-center ${className}`}>
|
|
{/* Logo Image */}
|
|
<div className={`${sizeClasses[size]} relative`}>
|
|
<Image
|
|
src="/images/awslinker-logo.png"
|
|
alt="AWS Linker Logo"
|
|
fill
|
|
className={`object-contain drop-shadow-md ${getImageOpacity()}`}
|
|
style={{
|
|
filter: getImageFilter(),
|
|
}}
|
|
priority
|
|
/>
|
|
</div>
|
|
|
|
{showText && (
|
|
<div className="ml-3">
|
|
<div className={`${textSizeClasses[size]} font-bold ${colorClasses[variant]}`}>
|
|
AWS Linker
|
|
</div>
|
|
{size !== 'sm' && (
|
|
<div
|
|
className={`text-xs ${variant === 'light' ? 'text-blue-100' : variant === 'dark' ? 'text-gray-600' : 'text-blue-500'} font-medium`}
|
|
>
|
|
DongYun Technology
|
|
</div>
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|