syoul
d0694df12a
- Création des fichiers JSON dans public/data/ - Modification de tous les composants pour fetch depuis /data/*.json - PlaceList, FAQ, Lexique, Tides, SunTimes, Excursions, Notifications - Données complètes pour Fakarava (plages, restaurants, épiceries) - Fix docker-compose.build.yml (suppression volume node_modules)
82 lines
2.5 KiB
TypeScript
82 lines
2.5 KiB
TypeScript
"use client";
|
|
|
|
import { useEffect, useState } from "react";
|
|
import { Sun, Sunrise, Sunset } from "lucide-react";
|
|
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
|
import { SunTimes } from "@/lib/types/sun-times";
|
|
|
|
export default function SunTimesWidget() {
|
|
const [sunTimes, setSunTimes] = useState<SunTimes | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
useEffect(() => {
|
|
const fetchSunTimes = async () => {
|
|
try {
|
|
const response = await fetch("/data/sun-times.json");
|
|
const data = await response.json();
|
|
// Récupérer les données d'aujourd'hui
|
|
setSunTimes(data[0] || null);
|
|
} catch (error) {
|
|
console.error("Erreur lors du chargement des heures du soleil:", error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
fetchSunTimes();
|
|
}, []);
|
|
|
|
if (loading) {
|
|
return (
|
|
<Card>
|
|
<CardContent className="p-6">
|
|
<div className="animate-pulse">Chargement...</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
if (!sunTimes) {
|
|
return null;
|
|
}
|
|
|
|
const getCurrentTime = () => {
|
|
const now = new Date();
|
|
return `${now.getHours().toString().padStart(2, "0")}:${now.getMinutes().toString().padStart(2, "0")}`;
|
|
};
|
|
|
|
const currentTime = getCurrentTime();
|
|
const isDay = currentTime >= sunTimes.sunrise && currentTime < sunTimes.sunset;
|
|
|
|
return (
|
|
<Card className="bg-gradient-to-br from-yellow-50 to-orange-50">
|
|
<CardHeader>
|
|
<CardTitle className="flex items-center gap-2">
|
|
<Sun className="h-6 w-6 text-yellow-500" />
|
|
Lever / Coucher du Soleil
|
|
</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<div className="grid grid-cols-2 gap-4">
|
|
<div className="bg-white rounded-xl p-4 text-center">
|
|
<Sunrise className="h-8 w-8 text-yellow-500 mx-auto mb-2" />
|
|
<p className="text-xs text-gray-600 mb-1">Lever</p>
|
|
<p className="text-2xl font-bold text-primary">{sunTimes.sunrise}</p>
|
|
</div>
|
|
<div className="bg-white rounded-xl p-4 text-center">
|
|
<Sunset className="h-8 w-8 text-orange-500 mx-auto mb-2" />
|
|
<p className="text-xs text-gray-600 mb-1">Coucher</p>
|
|
<p className="text-2xl font-bold text-primary">{sunTimes.sunset}</p>
|
|
</div>
|
|
</div>
|
|
<div className="mt-4 text-center">
|
|
<p className="text-sm text-gray-600">
|
|
{isDay ? "☀️ Soleil actuellement visible" : "🌙 Nuit"}
|
|
</p>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|