Files
Compagnon-du-Lagon---Marama/components/mana-tracker/SunTimesWidget.tsx
syoul 115d8c05a7 Build APK Android fonctionnel - Corrections finales
- Ajout de Java 21 dans Dockerfile pour compatibilité Capacitor
- Création de fichiers de types séparés (lib/types/) pour éviter dépendances API routes
- Configuration next.config.export.js pour export statique
- Exclusion temporaire des routes API pendant le build
- Correction configuration Gradle (Java 17/21)
- Script build-apk.sh amélioré avec gestion des routes API
- APK généré avec succès (4.5MB) dans dist/compagnon-admin-debug.apk

Fichiers de types créés:
- lib/types/place.ts
- lib/types/infos.ts
- lib/types/tides.ts
- lib/types/excursions.ts
- lib/types/sun-times.ts
- lib/types/notifications.ts

Tous les imports mis à jour pour utiliser les nouveaux fichiers de types.
2025-11-23 10:07:34 +01:00

81 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("/api/sun-times");
const data = await response.json();
setSunTimes(data);
} 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>
);
}