82 lines
2.3 KiB
TypeScript
82 lines
2.3 KiB
TypeScript
'use client';
|
|
|
|
import Image from 'next/image';
|
|
import { useState } from 'react';
|
|
|
|
interface LogoProps {
|
|
variant?: 'default' | 'white';
|
|
size?: 'sm' | 'md' | 'lg';
|
|
showText?: boolean;
|
|
className?: string;
|
|
}
|
|
|
|
export default function Logo({
|
|
variant = 'default',
|
|
size = 'md',
|
|
showText = true,
|
|
className = ''
|
|
}: LogoProps) {
|
|
const [imageError, setImageError] = useState(false);
|
|
|
|
// Tailles selon le size prop
|
|
const sizes = {
|
|
sm: { width: 80, height: 40, textSize: 'text-sm', iconSize: 'text-2xl' },
|
|
md: { width: 120, height: 50, textSize: 'text-base', iconSize: 'text-3xl' },
|
|
lg: { width: 160, height: 60, textSize: 'text-lg', iconSize: 'text-4xl' },
|
|
};
|
|
|
|
const sizeConfig = sizes[size];
|
|
|
|
// Déterminer le chemin du logo selon la variante
|
|
const logoPath = variant === 'white'
|
|
? '/logos/logo-white.svg'
|
|
: '/logos/logo.svg';
|
|
|
|
const logoPathPNG = variant === 'white'
|
|
? '/logos/logo-white.png'
|
|
: '/logos/logo.png';
|
|
|
|
// Couleurs de texte selon la variante
|
|
const textColor = variant === 'white' ? 'text-white' : 'text-gray-900';
|
|
const subtextColor = variant === 'white' ? 'text-gray-300' : 'text-gray-600';
|
|
|
|
// Si une image personnalisée existe et n'a pas d'erreur, l'utiliser
|
|
if (!imageError) {
|
|
return (
|
|
<div className={`flex items-center gap-2 ${className}`}>
|
|
<Image
|
|
src={logoPath}
|
|
alt="Thé Tip Top Logo"
|
|
width={sizeConfig.width}
|
|
height={sizeConfig.height}
|
|
priority
|
|
className="object-contain"
|
|
onError={() => {
|
|
// Si SVG échoue, essayer PNG
|
|
const img = document.createElement('img');
|
|
img.src = logoPathPNG;
|
|
img.onerror = () => setImageError(true);
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
// Fallback : utiliser l'emoji et le texte
|
|
return (
|
|
<div className={`flex items-center gap-2 ${className}`}>
|
|
<span className={sizeConfig.iconSize}>🍵</span>
|
|
{showText && (
|
|
<div className="flex flex-col">
|
|
<span className={`font-bold ${sizeConfig.textSize} ${textColor}`}>
|
|
Thé Tip Top
|
|
</span>
|
|
<span className={`text-xs ${subtextColor} hidden sm:block`}>
|
|
Jeu-Concours 2024
|
|
</span>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|