first commit
This commit is contained in:
26
components/PWARegister.tsx
Normal file
26
components/PWARegister.tsx
Normal file
@ -0,0 +1,26 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect } from "react";
|
||||
|
||||
export default function PWARegister() {
|
||||
useEffect(() => {
|
||||
if (
|
||||
typeof window !== "undefined" &&
|
||||
"serviceWorker" in navigator
|
||||
) {
|
||||
window.addEventListener("load", () => {
|
||||
navigator.serviceWorker
|
||||
.register("/sw.js")
|
||||
.then((registration) => {
|
||||
console.log("Service Worker registered:", registration);
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log("Service Worker registration failed:", error);
|
||||
});
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
35
components/accueil/WeatherWidget.tsx
Normal file
35
components/accueil/WeatherWidget.tsx
Normal file
@ -0,0 +1,35 @@
|
||||
import { Cloud, Sun } from "lucide-react";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||
|
||||
export default function WeatherWidget() {
|
||||
return (
|
||||
<Card className="bg-gradient-to-br from-primary/10 to-secondary">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Sun className="h-6 w-6 text-primary" />
|
||||
Météo
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<p className="text-3xl font-bold text-primary">28°C</p>
|
||||
<p className="text-gray-600 mt-1">Ensoleillé</p>
|
||||
</div>
|
||||
<div className="text-6xl">
|
||||
<Sun className="h-16 w-16 text-yellow-400" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-4 flex gap-4 text-sm text-gray-600">
|
||||
<div>
|
||||
<span className="font-semibold">Vent:</span> 15 km/h
|
||||
</div>
|
||||
<div>
|
||||
<span className="font-semibold">Humidité:</span> 75%
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
56
components/accueil/WifiCard.tsx
Normal file
56
components/accueil/WifiCard.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Wifi, Copy, Check } from "lucide-react";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { config } from "@/lib/config";
|
||||
|
||||
export default function WifiCard() {
|
||||
const [copied, setCopied] = useState(false);
|
||||
|
||||
const handleCopyPassword = async () => {
|
||||
try {
|
||||
await navigator.clipboard.writeText(config.wifiPassword);
|
||||
setCopied(true);
|
||||
setTimeout(() => setCopied(false), 2000);
|
||||
} catch (err) {
|
||||
console.error("Erreur lors de la copie:", err);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="bg-white">
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center gap-2">
|
||||
<Wifi className="h-6 w-6 text-primary" />
|
||||
Connexion WiFi
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div>
|
||||
<p className="text-sm text-gray-600 mb-1">Nom du réseau</p>
|
||||
<p className="text-lg font-semibold text-primary">{config.wifiName}</p>
|
||||
</div>
|
||||
<Button
|
||||
onClick={handleCopyPassword}
|
||||
className="w-full h-14 text-lg"
|
||||
size="lg"
|
||||
>
|
||||
{copied ? (
|
||||
<>
|
||||
<Check className="mr-2 h-5 w-5" />
|
||||
Mot de passe copié !
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Copy className="mr-2 h-5 w-5" />
|
||||
Copier le mot de passe
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
54
components/explorer/CategoryList.tsx
Normal file
54
components/explorer/CategoryList.tsx
Normal file
@ -0,0 +1,54 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { Waves, Utensils, ShoppingBag, Activity } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
export interface Category {
|
||||
id: string;
|
||||
name: string;
|
||||
icon: React.ComponentType<{ className?: string }>;
|
||||
}
|
||||
|
||||
const categories: Category[] = [
|
||||
{ id: "all", name: "Tout", icon: Activity },
|
||||
{ id: "plages", name: "Plages", icon: Waves },
|
||||
{ id: "restaurants", name: "Restaurants / Roulottes", icon: Utensils },
|
||||
{ id: "epiceries", name: "Epiceries", icon: ShoppingBag },
|
||||
{ id: "activites", name: "Activités", icon: Activity },
|
||||
];
|
||||
|
||||
interface CategoryListProps {
|
||||
selectedCategory: string;
|
||||
onCategoryChange: (categoryId: string) => void;
|
||||
}
|
||||
|
||||
export default function CategoryList({
|
||||
selectedCategory,
|
||||
onCategoryChange,
|
||||
}: CategoryListProps) {
|
||||
return (
|
||||
<div className="flex gap-3 overflow-x-auto pb-2 px-4 scrollbar-hide">
|
||||
{categories.map((category) => {
|
||||
const Icon = category.icon;
|
||||
const isSelected = selectedCategory === category.id;
|
||||
return (
|
||||
<button
|
||||
key={category.id}
|
||||
onClick={() => onCategoryChange(category.id)}
|
||||
className={cn(
|
||||
"flex items-center gap-2 px-4 py-2 rounded-xl whitespace-nowrap transition-colors",
|
||||
isSelected
|
||||
? "bg-primary text-white"
|
||||
: "bg-white text-gray-700 border border-gray-200 hover:bg-secondary"
|
||||
)}
|
||||
>
|
||||
<Icon className="h-5 w-5" />
|
||||
<span className="font-medium">{category.name}</span>
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
94
components/explorer/PlaceCard.tsx
Normal file
94
components/explorer/PlaceCard.tsx
Normal file
@ -0,0 +1,94 @@
|
||||
"use client";
|
||||
|
||||
import { MapPin, ExternalLink } from "lucide-react";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Place } from "@/app/api/places/route";
|
||||
|
||||
interface PlaceCardProps {
|
||||
place: Place;
|
||||
}
|
||||
|
||||
export default function PlaceCard({ place }: PlaceCardProps) {
|
||||
const handleOpenMaps = () => {
|
||||
let url: string;
|
||||
if (place.gmapLink && place.gmapLink !== "LIEN_GOOGLE_MAPS_A_INSERER") {
|
||||
url = place.gmapLink;
|
||||
} else {
|
||||
url = `https://www.google.com/maps/search/?api=1&query=${encodeURIComponent(place.location.address)}`;
|
||||
}
|
||||
window.open(url, "_blank");
|
||||
};
|
||||
|
||||
return (
|
||||
<Card className="overflow-hidden">
|
||||
<div className="relative h-48 bg-gradient-to-br from-primary/20 to-secondary">
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<MapPin className="h-16 w-16 text-primary/30" />
|
||||
</div>
|
||||
</div>
|
||||
<CardHeader>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1">
|
||||
<CardTitle>{place.name}</CardTitle>
|
||||
{place.type && (
|
||||
<p className="text-sm text-gray-500 mt-1">{place.type}</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<p className="text-gray-700 leading-relaxed">{place.description}</p>
|
||||
|
||||
{place.keywords && place.keywords.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{place.keywords.map((keyword, index) => (
|
||||
<span
|
||||
key={index}
|
||||
className="px-2 py-1 bg-secondary text-primary text-xs font-medium rounded-lg"
|
||||
>
|
||||
{keyword}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<MapPin className="h-4 w-4" />
|
||||
<span>{place.location.address}</span>
|
||||
</div>
|
||||
{place.contact && (
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<span className="font-medium">Contact:</span>
|
||||
<a
|
||||
href={`tel:${place.contact.replace(/\s/g, "")}`}
|
||||
className="text-primary hover:underline"
|
||||
>
|
||||
{place.contact}
|
||||
</a>
|
||||
</div>
|
||||
)}
|
||||
{place.horaires && (
|
||||
<div className="bg-blue-50 border border-blue-200 rounded-xl p-3">
|
||||
<p className="text-xs font-semibold text-blue-900 mb-1">Horaires</p>
|
||||
<p className="text-sm text-blue-800">{place.horaires}</p>
|
||||
</div>
|
||||
)}
|
||||
{place.conseil && (
|
||||
<div className="bg-secondary border border-primary/20 rounded-xl p-3">
|
||||
<p className="text-xs font-semibold text-primary mb-1">💡 Conseil pratique</p>
|
||||
<p className="text-sm text-gray-700">{place.conseil}</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<Button onClick={handleOpenMaps} className="w-full" variant="outline">
|
||||
<ExternalLink className="mr-2 h-4 w-4" />
|
||||
Y aller
|
||||
</Button>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
58
components/explorer/PlaceList.tsx
Normal file
58
components/explorer/PlaceList.tsx
Normal file
@ -0,0 +1,58 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import PlaceCard from "./PlaceCard";
|
||||
import { Place } from "@/app/api/places/route";
|
||||
|
||||
interface PlaceListProps {
|
||||
category: string;
|
||||
}
|
||||
|
||||
export default function PlaceList({ category }: PlaceListProps) {
|
||||
const [places, setPlaces] = useState<Place[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchPlaces = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const response = await fetch(
|
||||
`/api/places${category !== "all" ? `?category=${category}` : ""}`
|
||||
);
|
||||
const data = await response.json();
|
||||
setPlaces(data);
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du chargement des lieux:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchPlaces();
|
||||
}, [category]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<p className="text-gray-600">Chargement...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (places.length === 0) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-12">
|
||||
<p className="text-gray-600">Aucun lieu trouvé dans cette catégorie.</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6 px-4 pb-6">
|
||||
{places.map((place) => (
|
||||
<PlaceCard key={place.id} place={place} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
96
components/infos/ContactSection.tsx
Normal file
96
components/infos/ContactSection.tsx
Normal file
@ -0,0 +1,96 @@
|
||||
"use client";
|
||||
|
||||
import { Mail, Phone, MapPin, Clock } from "lucide-react";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||
import { config } from "@/lib/config";
|
||||
|
||||
export default function ContactSection() {
|
||||
const contact = config.contact;
|
||||
|
||||
return (
|
||||
<Card className="bg-secondary">
|
||||
<CardHeader>
|
||||
<CardTitle>Nous contacter</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{contact.phone && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="bg-primary/10 p-2 rounded-xl">
|
||||
<Phone className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-600 mb-1">Téléphone</p>
|
||||
<a
|
||||
href={`tel:${contact.phone.replace(/\s/g, "")}`}
|
||||
className="text-primary font-semibold hover:underline"
|
||||
>
|
||||
{contact.phone}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.whatsapp && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="bg-green-100 p-2 rounded-xl">
|
||||
<Phone className="h-5 w-5 text-green-600" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-600 mb-1">WhatsApp</p>
|
||||
<a
|
||||
href={`https://wa.me/${contact.whatsapp.replace(/[^\d]/g, "")}`}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="text-green-600 font-semibold hover:underline"
|
||||
>
|
||||
{contact.whatsapp}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.email && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="bg-primary/10 p-2 rounded-xl">
|
||||
<Mail className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-600 mb-1">Email</p>
|
||||
<a
|
||||
href={`mailto:${contact.email}`}
|
||||
className="text-primary font-semibold hover:underline break-all"
|
||||
>
|
||||
{contact.email}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.address && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="bg-primary/10 p-2 rounded-xl">
|
||||
<MapPin className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-600 mb-1">Adresse</p>
|
||||
<p className="text-gray-700 font-medium">{contact.address}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{contact.hours && (
|
||||
<div className="flex items-start gap-3">
|
||||
<div className="bg-primary/10 p-2 rounded-xl">
|
||||
<Clock className="h-5 w-5 text-primary" />
|
||||
</div>
|
||||
<div className="flex-1">
|
||||
<p className="text-sm text-gray-600 mb-1">Horaires</p>
|
||||
<p className="text-gray-700 font-medium">{contact.hours}</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
80
components/infos/FAQAccordion.tsx
Normal file
80
components/infos/FAQAccordion.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState, useMemo } from "react";
|
||||
import {
|
||||
Accordion,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
AccordionContent,
|
||||
} from "@/components/ui/accordion";
|
||||
import { FAQItem } from "@/app/api/infos/route";
|
||||
|
||||
export default function FAQAccordion() {
|
||||
const [faqItems, setFaqItems] = useState<FAQItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchFAQ = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/infos?type=faq");
|
||||
const data = await response.json();
|
||||
setFaqItems(data);
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du chargement de la FAQ:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchFAQ();
|
||||
}, []);
|
||||
|
||||
// Grouper les FAQ par catégorie
|
||||
const faqByCategory = useMemo(() => {
|
||||
const grouped: Record<string, FAQItem[]> = {};
|
||||
faqItems.forEach((item) => {
|
||||
const category = item.category || "Autres";
|
||||
if (!grouped[category]) {
|
||||
grouped[category] = [];
|
||||
}
|
||||
grouped[category].push(item);
|
||||
});
|
||||
return grouped;
|
||||
}, [faqItems]);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<p className="text-gray-600">Chargement...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
{Object.entries(faqByCategory).map(([category, items]) => (
|
||||
<div key={category} className="space-y-3">
|
||||
<h3 className="text-lg font-semibold text-primary flex items-center gap-2">
|
||||
{items[0]?.icon && <span>{items[0].icon}</span>}
|
||||
<span>{category}</span>
|
||||
</h3>
|
||||
<Accordion type="single" collapsible className="w-full">
|
||||
{items.map((item) => (
|
||||
<AccordionItem key={item.id} value={item.id}>
|
||||
<AccordionTrigger className="text-left">
|
||||
{item.question}
|
||||
</AccordionTrigger>
|
||||
<AccordionContent>
|
||||
<p className="text-gray-700 leading-relaxed whitespace-pre-line">
|
||||
{item.answer}
|
||||
</p>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
))}
|
||||
</Accordion>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
63
components/infos/LexiqueSection.tsx
Normal file
63
components/infos/LexiqueSection.tsx
Normal file
@ -0,0 +1,63 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||
import { LexiqueItem } from "@/app/api/infos/route";
|
||||
|
||||
export default function LexiqueSection() {
|
||||
const [lexiqueItems, setLexiqueItems] = useState<LexiqueItem[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchLexique = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/infos?type=lexique");
|
||||
const data = await response.json();
|
||||
setLexiqueItems(data);
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du chargement du lexique:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchLexique();
|
||||
}, []);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex items-center justify-center py-8">
|
||||
<p className="text-gray-600">Chargement...</p>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card className="bg-secondary">
|
||||
<CardHeader>
|
||||
<CardTitle>Lexique Tahitien</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{lexiqueItems.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="border-b border-primary/20 pb-4 last:border-0 last:pb-0"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<h3 className="text-lg font-semibold text-primary">
|
||||
{item.mot}
|
||||
</h3>
|
||||
<span className="text-sm font-medium text-gray-600">
|
||||
{item.traduction}
|
||||
</span>
|
||||
</div>
|
||||
<p className="text-sm text-gray-700">{item.description}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
11
components/layout/Layout.tsx
Normal file
11
components/layout/Layout.tsx
Normal file
@ -0,0 +1,11 @@
|
||||
import TabNavigation from "./TabNavigation";
|
||||
|
||||
export default function Layout({ children }: { children: React.ReactNode }) {
|
||||
return (
|
||||
<div className="min-h-screen bg-background pb-16">
|
||||
{children}
|
||||
<TabNavigation />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
60
components/layout/TabNavigation.tsx
Normal file
60
components/layout/TabNavigation.tsx
Normal file
@ -0,0 +1,60 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { usePathname } from "next/navigation";
|
||||
import { Home, MapPin, Info, Waves } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
name: "Accueil",
|
||||
href: "/accueil",
|
||||
icon: Home,
|
||||
},
|
||||
{
|
||||
name: "Explorer",
|
||||
href: "/explorer",
|
||||
icon: MapPin,
|
||||
},
|
||||
{
|
||||
name: "Mana",
|
||||
href: "/mana-tracker",
|
||||
icon: Waves,
|
||||
},
|
||||
{
|
||||
name: "Infos",
|
||||
href: "/infos",
|
||||
icon: Info,
|
||||
},
|
||||
];
|
||||
|
||||
export default function TabNavigation() {
|
||||
const pathname = usePathname();
|
||||
|
||||
return (
|
||||
<nav className="fixed bottom-0 left-0 right-0 z-50 bg-white border-t border-gray-200 shadow-lg">
|
||||
<div className="flex items-center justify-around h-16 px-2">
|
||||
{tabs.map((tab) => {
|
||||
const Icon = tab.icon;
|
||||
const isActive = pathname === tab.href;
|
||||
return (
|
||||
<Link
|
||||
key={tab.href}
|
||||
href={tab.href}
|
||||
className={cn(
|
||||
"flex flex-col items-center justify-center gap-1 flex-1 h-full rounded-xl transition-colors",
|
||||
isActive
|
||||
? "text-primary bg-secondary"
|
||||
: "text-gray-500 hover:text-primary hover:bg-gray-50"
|
||||
)}
|
||||
>
|
||||
<Icon className="h-6 w-6" />
|
||||
<span className="text-xs font-medium">{tab.name}</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
259
components/mana-tracker/ExcursionBooking.tsx
Normal file
259
components/mana-tracker/ExcursionBooking.tsx
Normal file
@ -0,0 +1,259 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect } from "react";
|
||||
import { Calendar, Users, CheckCircle } from "lucide-react";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Excursion } from "@/app/api/excursions/route";
|
||||
|
||||
export default function ExcursionBooking() {
|
||||
const [excursions, setExcursions] = useState<Excursion[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [selectedExcursion, setSelectedExcursion] = useState<Excursion | null>(null);
|
||||
const [formData, setFormData] = useState({
|
||||
name: "",
|
||||
email: "",
|
||||
phone: "",
|
||||
date: "",
|
||||
participants: 1,
|
||||
});
|
||||
const [submitting, setSubmitting] = useState(false);
|
||||
const [success, setSuccess] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const fetchExcursions = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/excursions");
|
||||
const data = await response.json();
|
||||
setExcursions(data);
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du chargement des excursions:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
fetchExcursions();
|
||||
}, []);
|
||||
|
||||
const handleSubmit = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!selectedExcursion) return;
|
||||
|
||||
setSubmitting(true);
|
||||
try {
|
||||
const response = await fetch("/api/excursions", {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({
|
||||
excursionId: selectedExcursion.id,
|
||||
...formData,
|
||||
}),
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
if (result.success) {
|
||||
setSuccess(true);
|
||||
setFormData({ name: "", email: "", phone: "", date: "", participants: 1 });
|
||||
setTimeout(() => {
|
||||
setSuccess(false);
|
||||
setSelectedExcursion(null);
|
||||
}, 3000);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la réservation:", error);
|
||||
} finally {
|
||||
setSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const getExcursionTypeLabel = (type: string) => {
|
||||
switch (type) {
|
||||
case "tour-lagon":
|
||||
return "Tour Lagon";
|
||||
case "plongee":
|
||||
return "Plongée";
|
||||
case "4x4":
|
||||
return "4x4";
|
||||
default:
|
||||
return type;
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="animate-pulse">Chargement des excursions...</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (success) {
|
||||
return (
|
||||
<Card className="bg-secondary">
|
||||
<CardContent className="p-6 text-center">
|
||||
<CheckCircle className="h-12 w-12 text-primary mx-auto mb-4" />
|
||||
<h3 className="text-xl font-semibold text-primary mb-2">
|
||||
Réservation confirmée !
|
||||
</h3>
|
||||
<p className="text-gray-700">
|
||||
Votre demande de réservation a été enregistrée. Nous vous contacterons bientôt.
|
||||
</p>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
if (selectedExcursion) {
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Réserver : {selectedExcursion.name}</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<form onSubmit={handleSubmit} className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Nom complet
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
required
|
||||
value={formData.name}
|
||||
onChange={(e) => setFormData({ ...formData, name: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Email
|
||||
</label>
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={formData.email}
|
||||
onChange={(e) => setFormData({ ...formData, email: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Téléphone
|
||||
</label>
|
||||
<input
|
||||
type="tel"
|
||||
required
|
||||
value={formData.phone}
|
||||
onChange={(e) => setFormData({ ...formData, phone: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Date
|
||||
</label>
|
||||
<input
|
||||
type="date"
|
||||
required
|
||||
min={new Date().toISOString().split("T")[0]}
|
||||
value={formData.date}
|
||||
onChange={(e) => setFormData({ ...formData, date: e.target.value })}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-gray-700 mb-1">
|
||||
Participants
|
||||
</label>
|
||||
<input
|
||||
type="number"
|
||||
min="1"
|
||||
max="10"
|
||||
required
|
||||
value={formData.participants}
|
||||
onChange={(e) =>
|
||||
setFormData({ ...formData, participants: parseInt(e.target.value) })
|
||||
}
|
||||
className="w-full px-4 py-2 border border-gray-300 rounded-xl focus:ring-2 focus:ring-primary focus:border-transparent"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div className="bg-secondary rounded-xl p-4">
|
||||
<p className="text-sm text-gray-600 mb-1">Total</p>
|
||||
<p className="text-2xl font-bold text-primary">
|
||||
{selectedExcursion.price * formData.participants} XPF
|
||||
</p>
|
||||
</div>
|
||||
<div className="flex gap-3">
|
||||
<Button
|
||||
type="button"
|
||||
variant="outline"
|
||||
onClick={() => setSelectedExcursion(null)}
|
||||
className="flex-1"
|
||||
>
|
||||
Annuler
|
||||
</Button>
|
||||
<Button type="submit" disabled={submitting} className="flex-1">
|
||||
{submitting ? "Envoi..." : "Réserver"}
|
||||
</Button>
|
||||
</div>
|
||||
</form>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle>Réservation d'excursions</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="space-y-4">
|
||||
{excursions.map((excursion) => (
|
||||
<div
|
||||
key={excursion.id}
|
||||
className="border border-gray-200 rounded-xl p-4 hover:border-primary transition-colors"
|
||||
>
|
||||
<div className="flex items-start justify-between mb-2">
|
||||
<div className="flex-1">
|
||||
<h3 className="font-semibold text-lg text-primary mb-1">
|
||||
{excursion.name}
|
||||
</h3>
|
||||
<span className="inline-block px-3 py-1 bg-secondary text-primary text-xs font-medium rounded-lg mb-2">
|
||||
{getExcursionTypeLabel(excursion.type)}
|
||||
</span>
|
||||
<p className="text-sm text-gray-600 mb-2">{excursion.description}</p>
|
||||
<div className="flex items-center gap-4 text-xs text-gray-500">
|
||||
<span className="flex items-center gap-1">
|
||||
<Calendar className="h-4 w-4" />
|
||||
{excursion.duration}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-right ml-4">
|
||||
<p className="text-2xl font-bold text-primary">
|
||||
{excursion.price.toLocaleString()} XPF
|
||||
</p>
|
||||
<p className="text-xs text-gray-500">par personne</p>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => setSelectedExcursion(excursion)}
|
||||
disabled={!excursion.available}
|
||||
className="w-full mt-3"
|
||||
variant={excursion.available ? "default" : "outline"}
|
||||
>
|
||||
{excursion.available ? "Réserver" : "Indisponible"}
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
231
components/mana-tracker/PushNotificationManager.tsx
Normal file
231
components/mana-tracker/PushNotificationManager.tsx
Normal file
@ -0,0 +1,231 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { Bell, BellOff, X } from "lucide-react";
|
||||
import { Card, CardHeader, CardTitle, CardContent } from "@/components/ui/card";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Notification } from "@/app/api/notifications/route";
|
||||
|
||||
export default function PushNotificationManager() {
|
||||
const [notifications, setNotifications] = useState<Notification[]>([]);
|
||||
const [permission, setPermission] = useState<NotificationPermission>("default");
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined" && "Notification" in window && window.Notification) {
|
||||
setPermission(window.Notification.permission);
|
||||
}
|
||||
fetchNotifications();
|
||||
}, []);
|
||||
|
||||
const fetchNotifications = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/notifications");
|
||||
const data = await response.json();
|
||||
setNotifications(data);
|
||||
} catch (error) {
|
||||
console.error("Erreur lors du chargement des notifications:", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const requestPermission = async () => {
|
||||
if (typeof window === "undefined" || !("Notification" in window) || !window.Notification) {
|
||||
alert("Votre navigateur ne supporte pas les notifications");
|
||||
return;
|
||||
}
|
||||
|
||||
const permission = await window.Notification.requestPermission();
|
||||
setPermission(permission);
|
||||
|
||||
if (permission === "granted") {
|
||||
// Enregistrer le service worker pour les notifications push
|
||||
if ("serviceWorker" in navigator) {
|
||||
try {
|
||||
const registration = await navigator.serviceWorker.ready;
|
||||
|
||||
// Vérifier périodiquement les nouvelles notifications
|
||||
setInterval(async () => {
|
||||
try {
|
||||
const response = await fetch("/api/notifications");
|
||||
const newNotifications = await response.json();
|
||||
const unread = newNotifications.filter((n: Notification) => !n.read);
|
||||
|
||||
// Afficher une notification pour chaque nouvelle alerte non lue
|
||||
if (typeof window !== "undefined" && window.Notification) {
|
||||
unread.forEach((notification: Notification) => {
|
||||
if (window.Notification.permission === "granted") {
|
||||
new window.Notification(notification.title, {
|
||||
body: notification.message,
|
||||
icon: "/icon-192x192.png",
|
||||
badge: "/icon-192x192.png",
|
||||
tag: notification.id,
|
||||
requireInteraction: notification.type === "whale",
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la vérification des notifications:", error);
|
||||
}
|
||||
}, 60000); // Vérifier toutes les minutes
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de l'enregistrement du service worker:", error);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const showTestNotification = () => {
|
||||
if (permission === "granted" && typeof window !== "undefined" && window.Notification) {
|
||||
new window.Notification("Test de notification", {
|
||||
body: "Les notifications fonctionnent correctement !",
|
||||
icon: "/icon-192x192.png",
|
||||
badge: "/icon-192x192.png",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
const markAsRead = async (id: string) => {
|
||||
try {
|
||||
await fetch("/api/notifications", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ id, read: true }),
|
||||
});
|
||||
setNotifications(
|
||||
notifications.map((n) => (n.id === id ? { ...n, read: true } : n))
|
||||
);
|
||||
} catch (error) {
|
||||
console.error("Erreur lors de la mise à jour:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const getNotificationIcon = (type: string) => {
|
||||
switch (type) {
|
||||
case "whale":
|
||||
return "🐋";
|
||||
case "weather":
|
||||
return "🌦️";
|
||||
case "excursion":
|
||||
return "🚤";
|
||||
default:
|
||||
return "ℹ️";
|
||||
}
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<Card>
|
||||
<CardContent className="p-6">
|
||||
<div className="animate-pulse">Chargement...</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
const unreadCount = notifications.filter((n) => !n.read).length;
|
||||
|
||||
return (
|
||||
<Card>
|
||||
<CardHeader>
|
||||
<CardTitle className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<Bell className="h-6 w-6 text-primary" />
|
||||
Notifications
|
||||
</span>
|
||||
{unreadCount > 0 && (
|
||||
<span className="bg-primary text-white text-xs font-bold px-2 py-1 rounded-full">
|
||||
{unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
{permission === "default" && (
|
||||
<div className="bg-secondary rounded-xl p-4">
|
||||
<p className="text-sm text-gray-700 mb-3">
|
||||
Activez les notifications pour recevoir des alertes importantes (baleines, météo, etc.)
|
||||
</p>
|
||||
<Button onClick={requestPermission} className="w-full">
|
||||
<Bell className="mr-2 h-4 w-4" />
|
||||
Activer les notifications
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{permission === "denied" && (
|
||||
<div className="bg-red-50 border border-red-200 rounded-xl p-4">
|
||||
<p className="text-sm text-red-700">
|
||||
Les notifications sont désactivées. Veuillez les activer dans les paramètres de votre navigateur.
|
||||
</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{permission === "granted" && (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<p className="text-sm text-gray-600">Notifications activées</p>
|
||||
<Button
|
||||
onClick={showTestNotification}
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
Tester
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="space-y-2 max-h-64 overflow-y-auto">
|
||||
{notifications.length === 0 ? (
|
||||
<p className="text-sm text-gray-500 text-center py-4">
|
||||
Aucune notification pour le moment
|
||||
</p>
|
||||
) : (
|
||||
notifications.map((notification) => (
|
||||
<div
|
||||
key={notification.id}
|
||||
className={`border rounded-xl p-3 ${
|
||||
notification.read
|
||||
? "bg-gray-50 border-gray-200"
|
||||
: "bg-secondary border-primary/30"
|
||||
}`}
|
||||
>
|
||||
<div className="flex items-start justify-between gap-2">
|
||||
<div className="flex-1">
|
||||
<div className="flex items-center gap-2 mb-1">
|
||||
<span className="text-lg">
|
||||
{getNotificationIcon(notification.type)}
|
||||
</span>
|
||||
<h4 className="font-semibold text-sm">{notification.title}</h4>
|
||||
{!notification.read && (
|
||||
<span className="bg-primary text-white text-xs px-1.5 py-0.5 rounded-full">
|
||||
Nouveau
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-sm text-gray-700">{notification.message}</p>
|
||||
<p className="text-xs text-gray-500 mt-1">
|
||||
{new Date(notification.timestamp).toLocaleString("fr-FR")}
|
||||
</p>
|
||||
</div>
|
||||
{!notification.read && (
|
||||
<button
|
||||
onClick={() => markAsRead(notification.id)}
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
);
|
||||
}
|
||||
|
||||
80
components/mana-tracker/SunTimesWidget.tsx
Normal file
80
components/mana-tracker/SunTimesWidget.tsx
Normal file
@ -0,0 +1,80 @@
|
||||
"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 "@/app/api/sun-times/route";
|
||||
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
||||
100
components/mana-tracker/TideWidget.tsx
Normal file
100
components/mana-tracker/TideWidget.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
202
components/ui/accordion.tsx
Normal file
202
components/ui/accordion.tsx
Normal file
@ -0,0 +1,202 @@
|
||||
"use client";
|
||||
|
||||
import * as React from "react";
|
||||
import { ChevronDown } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface AccordionContextValue {
|
||||
value: string[];
|
||||
onValueChange: (value: string[]) => void;
|
||||
}
|
||||
|
||||
const AccordionContext = React.createContext<AccordionContextValue | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
interface AccordionProps {
|
||||
type?: "single" | "multiple";
|
||||
defaultValue?: string | string[];
|
||||
value?: string | string[];
|
||||
onValueChange?: (value: string | string[]) => void;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
|
||||
({ type = "single", defaultValue, value, onValueChange, children, className }, ref) => {
|
||||
const [internalValue, setInternalValue] = React.useState<string[]>(
|
||||
defaultValue
|
||||
? Array.isArray(defaultValue)
|
||||
? defaultValue
|
||||
: [defaultValue]
|
||||
: []
|
||||
);
|
||||
|
||||
const controlledValue = value
|
||||
? Array.isArray(value)
|
||||
? value
|
||||
: [value]
|
||||
: undefined;
|
||||
|
||||
const currentValue = controlledValue ?? internalValue;
|
||||
|
||||
const handleValueChange = React.useCallback(
|
||||
(newValue: string[]) => {
|
||||
if (!controlledValue) {
|
||||
setInternalValue(newValue);
|
||||
}
|
||||
if (onValueChange) {
|
||||
onValueChange(type === "single" ? newValue[0] || "" : newValue);
|
||||
}
|
||||
},
|
||||
[controlledValue, onValueChange, type]
|
||||
);
|
||||
|
||||
const contextValue = React.useMemo(
|
||||
() => ({
|
||||
value: currentValue,
|
||||
onValueChange: handleValueChange,
|
||||
}),
|
||||
[currentValue, handleValueChange]
|
||||
);
|
||||
|
||||
return (
|
||||
<AccordionContext.Provider value={contextValue}>
|
||||
<div ref={ref} className={cn("space-y-2", className)}>
|
||||
{children}
|
||||
</div>
|
||||
</AccordionContext.Provider>
|
||||
);
|
||||
}
|
||||
);
|
||||
Accordion.displayName = "Accordion";
|
||||
|
||||
interface AccordionItemProps {
|
||||
value: string;
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const AccordionItem = React.forwardRef<HTMLDivElement, AccordionItemProps>(
|
||||
({ value, children, className }, ref) => {
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("rounded-xl border border-gray-200 overflow-hidden", className)}
|
||||
data-value={value}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
);
|
||||
AccordionItem.displayName = "AccordionItem";
|
||||
|
||||
interface AccordionTriggerProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const AccordionTrigger = React.forwardRef<
|
||||
HTMLButtonElement,
|
||||
AccordionTriggerProps
|
||||
>(({ children, className }, ref) => {
|
||||
const context = React.useContext(AccordionContext);
|
||||
if (!context) {
|
||||
throw new Error("AccordionTrigger must be used within Accordion");
|
||||
}
|
||||
|
||||
const item = React.useContext(ItemContext);
|
||||
if (!item) {
|
||||
throw new Error("AccordionTrigger must be used within AccordionItem");
|
||||
}
|
||||
|
||||
const isOpen = context.value.includes(item.value);
|
||||
|
||||
const handleClick = () => {
|
||||
const newValue = isOpen
|
||||
? context.value.filter((v) => v !== item.value)
|
||||
: [...context.value, item.value];
|
||||
context.onValueChange(newValue);
|
||||
};
|
||||
|
||||
return (
|
||||
<button
|
||||
ref={ref}
|
||||
type="button"
|
||||
onClick={handleClick}
|
||||
className={cn(
|
||||
"flex w-full items-center justify-between p-4 text-left font-medium text-primary transition-all hover:bg-secondary [&[data-state=open]>svg]:rotate-180",
|
||||
className
|
||||
)}
|
||||
data-state={isOpen ? "open" : "closed"}
|
||||
>
|
||||
{children}
|
||||
<ChevronDown className="h-5 w-5 shrink-0 transition-transform duration-200" />
|
||||
</button>
|
||||
);
|
||||
});
|
||||
AccordionTrigger.displayName = "AccordionTrigger";
|
||||
|
||||
interface AccordionContentProps {
|
||||
children: React.ReactNode;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const ItemContext = React.createContext<{ value: string } | undefined>(
|
||||
undefined
|
||||
);
|
||||
|
||||
const AccordionContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
AccordionContentProps
|
||||
>(({ children, className }, ref) => {
|
||||
const context = React.useContext(AccordionContext);
|
||||
if (!context) {
|
||||
throw new Error("AccordionContent must be used within Accordion");
|
||||
}
|
||||
|
||||
const item = React.useContext(ItemContext);
|
||||
if (!item) {
|
||||
throw new Error("AccordionContent must be used within AccordionItem");
|
||||
}
|
||||
|
||||
const isOpen = context.value.includes(item.value);
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"overflow-hidden transition-all",
|
||||
isOpen ? "max-h-[1000px] opacity-100" : "max-h-0 opacity-0"
|
||||
)}
|
||||
>
|
||||
<div className={cn("p-4 pt-0 text-gray-700", className)}>
|
||||
{children}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
AccordionContent.displayName = "AccordionContent";
|
||||
|
||||
const AccordionItemWithContext = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
AccordionItemProps
|
||||
>(({ value, children, ...props }, ref) => {
|
||||
return (
|
||||
<ItemContext.Provider value={{ value }}>
|
||||
<AccordionItem ref={ref} value={value} {...props}>
|
||||
{children}
|
||||
</AccordionItem>
|
||||
</ItemContext.Provider>
|
||||
);
|
||||
});
|
||||
AccordionItemWithContext.displayName = "AccordionItem";
|
||||
|
||||
export {
|
||||
Accordion,
|
||||
AccordionItemWithContext as AccordionItem,
|
||||
AccordionTrigger,
|
||||
AccordionContent,
|
||||
};
|
||||
|
||||
46
components/ui/button.tsx
Normal file
46
components/ui/button.tsx
Normal file
@ -0,0 +1,46 @@
|
||||
import * as React from "react";
|
||||
import { cva, type VariantProps } from "class-variance-authority";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const buttonVariants = cva(
|
||||
"inline-flex items-center justify-center whitespace-nowrap rounded-xl text-base font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
|
||||
{
|
||||
variants: {
|
||||
variant: {
|
||||
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||
outline: "border-2 border-primary text-primary hover:bg-primary hover:text-white",
|
||||
ghost: "hover:bg-secondary hover:text-secondary-foreground",
|
||||
},
|
||||
size: {
|
||||
default: "h-12 px-6 py-3",
|
||||
sm: "h-10 px-4",
|
||||
lg: "h-14 px-8 text-lg",
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
variant: "default",
|
||||
size: "default",
|
||||
},
|
||||
}
|
||||
);
|
||||
|
||||
export interface ButtonProps
|
||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
|
||||
VariantProps<typeof buttonVariants> {}
|
||||
|
||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
||||
({ className, variant, size, ...props }, ref) => {
|
||||
return (
|
||||
<button
|
||||
className={cn(buttonVariants({ variant, size, className }))}
|
||||
ref={ref}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
}
|
||||
);
|
||||
Button.displayName = "Button";
|
||||
|
||||
export { Button, buttonVariants };
|
||||
|
||||
76
components/ui/card.tsx
Normal file
76
components/ui/card.tsx
Normal file
@ -0,0 +1,76 @@
|
||||
import * as React from "react";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const Card = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn(
|
||||
"rounded-2xl border border-gray-200 bg-white shadow-sm",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
Card.displayName = "Card";
|
||||
|
||||
const CardHeader = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex flex-col space-y-1.5 p-6", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardHeader.displayName = "CardHeader";
|
||||
|
||||
const CardTitle = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLHeadingElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<h3
|
||||
ref={ref}
|
||||
className={cn("text-xl font-semibold leading-none tracking-tight text-primary", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardTitle.displayName = "CardTitle";
|
||||
|
||||
const CardDescription = React.forwardRef<
|
||||
HTMLParagraphElement,
|
||||
React.HTMLAttributes<HTMLParagraphElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<p
|
||||
ref={ref}
|
||||
className={cn("text-sm text-gray-600", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardDescription.displayName = "CardDescription";
|
||||
|
||||
const CardContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
|
||||
));
|
||||
CardContent.displayName = "CardContent";
|
||||
|
||||
const CardFooter = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLAttributes<HTMLDivElement>
|
||||
>(({ className, ...props }, ref) => (
|
||||
<div
|
||||
ref={ref}
|
||||
className={cn("flex items-center p-6 pt-0", className)}
|
||||
{...props}
|
||||
/>
|
||||
));
|
||||
CardFooter.displayName = "CardFooter";
|
||||
|
||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
|
||||
|
||||
Reference in New Issue
Block a user