first commit

components/mana-tracker/TideWidget.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { Waves, TrendingUp, TrendingDown } from "lucide-react";
+import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
+import { TideData } from "@/app/api/tides/route";
+
+export default function TideWidget() {
+  const [tides, setTides] = useState<TideData[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const fetchTides = async () => {
+      try {
+        const response = await fetch("/api/tides");
+        const data = await response.json();
+        setTides(data);
+      } catch (error) {
+        console.error("Erreur lors du chargement des marées:", error);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchTides();
+  }, []);
+
+  if (loading) {
+    return (
+      <Card>
+        <CardContent className="p-6">
+          <div className="animate-pulse">Chargement des marées...</div>
+        </CardContent>
+      </Card>
+    );
+  }
+
+  const todayTide = tides[0];
+  const tomorrowTide = tides[1];
+
+  if (!todayTide) {
+    return null;
+  }
+
+  const formatDate = (dateString: string) => {
+    const date = new Date(dateString);
+    return date.toLocaleDateString("fr-FR", { weekday: "short", day: "numeric", month: "short" });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle className="flex items-center gap-2">
+          <Waves className="h-6 w-6 text-primary" />
+          Marées
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="space-y-4">
+        <div>
+          <p className="text-sm text-gray-600 mb-2">Aujourd'hui - {formatDate(todayTide.date)}</p>
+          <div className="grid grid-cols-2 gap-4">
+            <div className="bg-secondary rounded-xl p-3">
+              <div className="flex items-center gap-2 mb-1">
+                <TrendingUp className="h-4 w-4 text-primary" />
+                <span className="text-sm font-semibold text-primary">Haute mer</span>
+              </div>
+              <p className="text-lg font-bold">{todayTide.highTide.time}</p>
+              <p className="text-xs text-gray-600">{todayTide.highTide.height.toFixed(1)}m</p>
+            </div>
+            <div className="bg-secondary rounded-xl p-3">
+              <div className="flex items-center gap-2 mb-1">
+                <TrendingDown className="h-4 w-4 text-primary" />
+                <span className="text-sm font-semibold text-primary">Basse mer</span>
+              </div>
+              <p className="text-lg font-bold">{todayTide.lowTide.time}</p>
+              <p className="text-xs text-gray-600">{todayTide.lowTide.height.toFixed(1)}m</p>
+            </div>
+          </div>
+        </div>
+        
+        {tomorrowTide && (
+          <div className="pt-4 border-t border-gray-200">
+            <p className="text-sm text-gray-600 mb-2">Demain - {formatDate(tomorrowTide.date)}</p>
+            <div className="grid grid-cols-2 gap-4">
+              <div className="bg-gray-50 rounded-xl p-3">
+                <p className="text-xs text-gray-600 mb-1">Haute mer</p>
+                <p className="text-base font-semibold">{tomorrowTide.highTide.time}</p>
+              </div>
+              <div className="bg-gray-50 rounded-xl p-3">
+                <p className="text-xs text-gray-600 mb-1">Basse mer</p>
+                <p className="text-base font-semibold">{tomorrowTide.lowTide.time}</p>
+              </div>
+            </div>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+