57 lines
1.7 KiB
TypeScript
57 lines
1.7 KiB
TypeScript
"use client";
|
||
|
||
import { useState, useEffect } from "react";
|
||
|
||
interface LogoProps {
|
||
size?: number;
|
||
className?: string;
|
||
}
|
||
|
||
export default function Logo({ size = 120, className = "" }: LogoProps) {
|
||
const [imageError, setImageError] = useState(false);
|
||
const [imageLoaded, setImageLoaded] = useState(false);
|
||
|
||
useEffect(() => {
|
||
const img = new window.Image();
|
||
img.onload = () => setImageLoaded(true);
|
||
img.onerror = () => setImageError(true);
|
||
// Essayer d'abord le SVG, puis le PNG en fallback
|
||
img.src = "/logo-relais-marama.svg";
|
||
}, []);
|
||
|
||
if (imageError || !imageLoaded) {
|
||
return (
|
||
<div className={`flex flex-col items-center justify-center ${className}`}>
|
||
<div
|
||
className="bg-gradient-to-br from-primary/20 to-secondary rounded-full flex flex-col items-center justify-center text-primary font-bold border-2 border-primary/30"
|
||
style={{ width: size, height: size }}
|
||
>
|
||
<span className="text-2xl mb-1">🏝️</span>
|
||
<span style={{ fontSize: size * 0.2 }}>Relais</span>
|
||
<span style={{ fontSize: size * 0.15 }}>Marama</span>
|
||
</div>
|
||
<p className="text-primary font-semibold mt-2" style={{ fontSize: `${size * 0.15}px` }}>
|
||
Fakarava
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
return (
|
||
<div className={`flex flex-col items-center justify-center ${className}`}>
|
||
<img
|
||
src="/logo-relais-marama.svg"
|
||
alt="Relais Marama - Fakarava"
|
||
width={size}
|
||
height={size}
|
||
className="object-contain dark:invert"
|
||
style={{ maxWidth: `${size}px`, maxHeight: `${size}px` }}
|
||
/>
|
||
<p className="text-primary font-semibold mt-2" style={{ fontSize: `${size * 0.15}px` }}>
|
||
Fakarava
|
||
</p>
|
||
</div>
|
||
);
|
||
}
|
||
|