904 lines
31 KiB
JavaScript
904 lines
31 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import {
|
|
UserPlus,
|
|
LogIn,
|
|
BadgePlus,
|
|
RadioTower,
|
|
Search,
|
|
Cloud,
|
|
CloudRain,
|
|
Droplets,
|
|
Wind,
|
|
Thermometer,
|
|
Sun,
|
|
Moon,
|
|
MapPin,
|
|
CalendarClock,
|
|
ArrowRight,
|
|
BellRing,
|
|
LayoutDashboard,
|
|
TowerControl,
|
|
} from "lucide-react";
|
|
import { useAuth } from "../AuthContext";
|
|
import axios from "axios";
|
|
import { useTranslation } from "react-i18next";
|
|
import { API_BASE_URL } from "../config";
|
|
|
|
function EnhancedWeatherHome() {
|
|
const { t } = useTranslation();
|
|
const [searchQuery, setSearchQuery] = useState("");
|
|
const [locations, setLocations] = useState([]);
|
|
const [infoMeteo, setInfoMeteo] = useState([]);
|
|
const [activeFilter, setActiveFilter] = useState("all");
|
|
const [currentTime, setCurrentTime] = useState(new Date());
|
|
const { user, token } = useAuth();
|
|
const [ville, setVille] = useState("Paris, France");
|
|
const heure = currentTime.getHours();
|
|
const isDayTime = heure > 6 && heure < 20;
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentTime(new Date());
|
|
}, 60000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
useEffect(() => {
|
|
axios
|
|
.post(`${API_BASE_URL}/getMeteoHome`, {
|
|
location: ville,
|
|
})
|
|
.then((response) => {
|
|
if (response.data.length === 0) {
|
|
console.warn("Aucun infos disponible.");
|
|
} else {
|
|
console.log(response.data[0]);
|
|
setInfoMeteo(response.data[0]);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Erreur lors de la récupération des infos :", error);
|
|
});
|
|
}, [ville]);
|
|
useEffect(() => {
|
|
axios
|
|
.get(`${API_BASE_URL}/getLocations`)
|
|
.then((response) => {
|
|
if (response.data.length === 0) {
|
|
console.warn("Aucun lieu disponible.");
|
|
} else {
|
|
console.log(response.data);
|
|
setLocations(response.data);
|
|
}
|
|
})
|
|
.catch((error) => {
|
|
console.error("Erreur lors de la récupération des catégories :", error);
|
|
});
|
|
}, []);
|
|
const filteredLocations = locations.filter((loc) =>
|
|
loc.toLowerCase().includes(searchQuery.toLowerCase())
|
|
);
|
|
const formatDate = (date) => {
|
|
const options = { weekday: "long", day: "numeric", month: "long" };
|
|
return date.toLocaleDateString("fr-FR", options);
|
|
};
|
|
|
|
const formatHeure = (h) => {
|
|
const heureFormatee = (h % 24).toString().padStart(2, "0");
|
|
return `${heureFormatee}:00`;
|
|
};
|
|
const hourlyForecast = [
|
|
{
|
|
time: "Maintenant",
|
|
temp: "22°",
|
|
icon: <Cloud className="text-indigo-500" size={24} />,
|
|
},
|
|
{
|
|
time: formatHeure(heure + 1),
|
|
temp: "22°",
|
|
icon: <Cloud className="text-indigo-500" size={24} />,
|
|
},
|
|
{
|
|
time: formatHeure(heure + 2),
|
|
temp: "22°",
|
|
icon: <Sun className="text-yellow-500" size={24} />,
|
|
},
|
|
{
|
|
time: formatHeure(heure + 3),
|
|
temp: "21°",
|
|
icon: <Sun className="text-yellow-500" size={24} />,
|
|
},
|
|
{
|
|
time: formatHeure(heure + 4),
|
|
temp: "20°",
|
|
icon: <CloudRain className="text-blue-500" size={24} />,
|
|
},
|
|
{
|
|
time: formatHeure(heure + 5),
|
|
temp: "19°",
|
|
icon: <CloudRain className="text-blue-500" size={24} />,
|
|
},
|
|
];
|
|
|
|
const dailyForecast = [
|
|
{
|
|
day: "Lun",
|
|
temp: "21°/15°",
|
|
icon: <Cloud className="text-indigo-400" size={32} />,
|
|
},
|
|
{
|
|
day: "Mar",
|
|
temp: "23°/16°",
|
|
icon: <Sun className="text-yellow-500" size={32} />,
|
|
},
|
|
{
|
|
day: "Mer",
|
|
temp: "24°/17°",
|
|
icon: <Sun className="text-yellow-500" size={32} />,
|
|
},
|
|
{
|
|
day: "Jeu",
|
|
temp: "22°/16°",
|
|
icon: <CloudRain className="text-blue-400" size={32} />,
|
|
},
|
|
{
|
|
day: "Ven",
|
|
temp: "20°/14°",
|
|
icon: <CloudRain className="text-blue-400" size={32} />,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div
|
|
className={`min-h-screen ${
|
|
isDayTime
|
|
? "bg-gradient-to-br from-blue-100 to-sky-200"
|
|
: "bg-gradient-to-br from-blue-900 to-indigo-900 text-white"
|
|
}`}
|
|
>
|
|
{" "}
|
|
<div className="relative overflow-hidden">
|
|
<div className="absolute inset-0 z-0">
|
|
<div
|
|
className={`absolute inset-0 ${
|
|
isDayTime
|
|
? "bg-gradient-to-r from-yellow-200/20 to-blue-300/30"
|
|
: "bg-gradient-to-r from-blue-900/50 to-purple-900/60"
|
|
}`}
|
|
></div>
|
|
{isDayTime ? (
|
|
<>
|
|
<div className="absolute top-10 right-10 w-32 h-32 rounded-full bg-yellow-300 blur-xl opacity-70 animate-pulse"></div>
|
|
<div className="absolute -top-10 left-1/4 w-16 h-16 rounded-full bg-white blur-md opacity-30"></div>
|
|
<div className="absolute top-1/3 left-1/3 w-12 h-12 rounded-full bg-white blur-md opacity-30"></div>
|
|
</>
|
|
) : (
|
|
<>
|
|
<div className="absolute top-10 right-14 w-20 h-20 rounded-full bg-gray-200 blur-lg opacity-70"></div>
|
|
<div className="absolute top-14 right-10 w-14 h-14 rounded-full bg-gray-900 blur-sm"></div>
|
|
</>
|
|
)}
|
|
</div>
|
|
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 relative z-10">
|
|
<div className="text-center relative">
|
|
<h1
|
|
className={`text-5xl font-bold mb-6 ${
|
|
isDayTime ? "text-gray-900" : "text-white"
|
|
} animate-fade-in`}
|
|
>
|
|
{t('home.title')}
|
|
</h1>
|
|
<p
|
|
className={`text-xl ${
|
|
isDayTime ? "text-gray-700" : "text-gray-200"
|
|
} max-w-3xl mx-auto mb-10`}
|
|
>
|
|
{t('home.subtitle')}
|
|
</p>
|
|
|
|
<div className="max-w-3xl mx-auto relative z-10 mb-16 transition-all duration-300 hover:transform hover:-translate-y-1">
|
|
<div className="relative">
|
|
<Search
|
|
className={`absolute left-4 top-1/2 transform -translate-y-1/2 ${
|
|
isDayTime ? "text-gray-400" : "text-gray-500"
|
|
}`}
|
|
size={24}
|
|
/>
|
|
<input
|
|
type="text"
|
|
placeholder={t('home.searchPlaceholder')}
|
|
className={`w-full pl-12 pr-4 py-4 rounded-xl border ${
|
|
isDayTime
|
|
? "border-gray-200 bg-white"
|
|
: "border-gray-700 bg-gray-800 text-white"
|
|
} focus:outline-none focus:ring-2 focus:ring-indigo-500 shadow-lg`}
|
|
value={searchQuery}
|
|
onChange={(e) => setSearchQuery(e.target.value)}
|
|
/>
|
|
</div>
|
|
{searchQuery.length > 0 && (
|
|
<ul className="mt-4 space-y-2 bg-white dark:bg-gray-100 rounded-xl p-4 shadow-md">
|
|
{filteredLocations.length > 0 ? (
|
|
filteredLocations.map((loc, idx) => (
|
|
<li
|
|
key={idx}
|
|
className="p-2 rounded text-gray-800 hover:bg-gray-200 dark:hover:bg-gray-300 cursor-pointer"
|
|
onClick={() => {
|
|
setVille(loc);
|
|
setSearchQuery("");
|
|
}}
|
|
>
|
|
{loc}
|
|
</li>
|
|
))
|
|
) : (
|
|
<li className="text-gray-900 dark:text-gray-500">
|
|
{t('home.noCityFound')}
|
|
</li>
|
|
)}
|
|
</ul>
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pb-12 relative z-10">
|
|
<div
|
|
className={`rounded-2xl shadow-xl mb-10 overflow-hidden transition-all duration-300 hover:shadow-2xl ${
|
|
isDayTime ? "bg-white" : "bg-gray-800"
|
|
}`}
|
|
>
|
|
<div className="p-8">
|
|
<div className="flex flex-col lg:flex-row justify-between">
|
|
<div className="mb-6 lg:mb-0">
|
|
<div className="flex items-center">
|
|
<MapPin
|
|
className={`${
|
|
isDayTime ? "text-indigo-600" : "text-indigo-400"
|
|
} mr-2`}
|
|
size={20}
|
|
/>
|
|
<h3
|
|
className={`text-xl font-medium ${
|
|
isDayTime ? "text-gray-700" : "text-gray-200"
|
|
}`}
|
|
>
|
|
{ville}
|
|
</h3>
|
|
</div>
|
|
<p
|
|
className={`text-sm ${
|
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
|
} mb-6`}
|
|
>
|
|
{formatDate(currentTime)}
|
|
</p>
|
|
<div className="flex items-center">
|
|
{isDayTime ? (
|
|
<Cloud className="text-indigo-500 mr-6" size={64} />
|
|
) : (
|
|
<Moon className="text-indigo-300 mr-6" size={64} />
|
|
)}
|
|
<div>
|
|
<h2
|
|
className={`text-6xl font-bold ${
|
|
isDayTime ? "text-gray-900" : "text-white"
|
|
}`}
|
|
>
|
|
{infoMeteo.temperature}°C
|
|
</h2>
|
|
<p
|
|
className={`text-lg ${
|
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
|
}`}
|
|
>
|
|
{t('home.partlyCloudy')}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-2 sm:grid-cols-3 gap-6">
|
|
<div
|
|
className={`rounded-xl p-4 ${
|
|
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
|
}`}
|
|
>
|
|
<p
|
|
className={`text-sm ${
|
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
|
}`}
|
|
>
|
|
{t('home.feelsLike')}
|
|
</p>
|
|
<div className="flex items-center mt-1">
|
|
<Thermometer
|
|
className={`${
|
|
isDayTime ? "text-red-500" : "text-red-400"
|
|
} mr-2`}
|
|
size={18}
|
|
/>
|
|
<span
|
|
className={`text-lg font-medium ${
|
|
isDayTime ? "text-gray-900" : "text-white"
|
|
}`}
|
|
>
|
|
{infoMeteo.temperature - 2}°C
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`rounded-xl p-4 ${
|
|
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
|
}`}
|
|
>
|
|
<p
|
|
className={`text-sm ${
|
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
|
}`}
|
|
>
|
|
{t('home.humidity')}
|
|
</p>
|
|
<div className="flex items-center mt-1">
|
|
<Droplets
|
|
className={`${
|
|
isDayTime ? "text-blue-500" : "text-blue-400"
|
|
} mr-2`}
|
|
size={18}
|
|
/>
|
|
<span
|
|
className={`text-lg font-medium ${
|
|
isDayTime ? "text-gray-900" : "text-white"
|
|
}`}
|
|
>
|
|
{infoMeteo.humidity}%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`rounded-xl p-4 ${
|
|
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
|
}`}
|
|
>
|
|
<p
|
|
className={`text-sm ${
|
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
|
}`}
|
|
>
|
|
{t('home.wind')}
|
|
</p>
|
|
<div className="flex items-center mt-1">
|
|
<Wind
|
|
className={`${
|
|
isDayTime ? "text-blue-500" : "text-blue-400"
|
|
} mr-2`}
|
|
size={18}
|
|
/>
|
|
<span
|
|
className={`text-lg font-medium ${
|
|
isDayTime ? "text-gray-900" : "text-white"
|
|
}`}
|
|
>
|
|
{infoMeteo.wind_speed} km/h
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`rounded-xl p-4 ${
|
|
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
|
}`}
|
|
>
|
|
<p
|
|
className={`text-sm ${
|
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
|
}`}
|
|
>
|
|
{t('home.rain')}
|
|
</p>
|
|
<div className="flex items-center mt-1">
|
|
<CloudRain
|
|
className={`${
|
|
isDayTime ? "text-blue-500" : "text-blue-400"
|
|
} mr-2`}
|
|
size={18}
|
|
/>
|
|
<span
|
|
className={`text-lg font-medium ${
|
|
isDayTime ? "text-gray-900" : "text-white"
|
|
}`}
|
|
>
|
|
30%
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`rounded-xl p-4 ${
|
|
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
|
}`}
|
|
>
|
|
<p
|
|
className={`text-sm ${
|
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
|
}`}
|
|
>
|
|
{t('home.sunrise')}
|
|
</p>
|
|
<div className="flex items-center mt-1">
|
|
<Sun
|
|
className={`${
|
|
isDayTime ? "text-yellow-500" : "text-yellow-400"
|
|
} mr-2`}
|
|
size={18}
|
|
/>
|
|
<span
|
|
className={`text-lg font-medium ${
|
|
isDayTime ? "text-gray-900" : "text-white"
|
|
}`}
|
|
>
|
|
06:42
|
|
</span>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`rounded-xl p-4 ${
|
|
isDayTime ? "bg-blue-50" : "bg-gray-700"
|
|
}`}
|
|
>
|
|
<p
|
|
className={`text-sm ${
|
|
isDayTime ? "text-gray-500" : "text-gray-400"
|
|
}`}
|
|
>
|
|
{t('home.sunset')}
|
|
</p>
|
|
<div className="flex items-center mt-1">
|
|
<Moon
|
|
className={`${
|
|
isDayTime ? "text-indigo-500" : "text-indigo-400"
|
|
} mr-2`}
|
|
size={18}
|
|
/>
|
|
<span
|
|
className={`text-lg font-medium ${
|
|
isDayTime ? "text-gray-900" : "text-white"
|
|
}`}
|
|
>
|
|
20:51
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`px-8 py-6 ${isDayTime ? "bg-gray-50" : "bg-gray-900"}`}
|
|
>
|
|
<h3
|
|
className={`text-lg font-semibold mb-4 ${
|
|
isDayTime ? "text-gray-800" : "text-gray-200"
|
|
}`}
|
|
>
|
|
{t('home.hourlyForecast')}
|
|
</h3>
|
|
<div className="flex overflow-x-auto pb-4 gap-6">
|
|
{hourlyForecast.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={`flex-shrink-0 flex flex-col items-center p-4 rounded-lg ${
|
|
isDayTime ? "bg-white" : "bg-gray-800"
|
|
} shadow-sm`}
|
|
>
|
|
<p
|
|
className={`text-sm font-medium ${
|
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
|
}`}
|
|
>
|
|
{item.time}
|
|
</p>
|
|
{item.icon}
|
|
<p
|
|
className={`text-lg font-bold mt-1 ${
|
|
isDayTime ? "text-gray-900" : "text-white"
|
|
}`}
|
|
>
|
|
{item.temp}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`rounded-2xl shadow-xl mb-10 overflow-hidden ${
|
|
isDayTime ? "bg-white" : "bg-gray-800"
|
|
}`}
|
|
>
|
|
<div className="p-8">
|
|
<h3
|
|
className={`text-xl font-semibold mb-6 ${
|
|
isDayTime ? "text-gray-800" : "text-gray-200"
|
|
}`}
|
|
>
|
|
{t('home.dailyForecast')}
|
|
</h3>
|
|
<div className="space-y-6">
|
|
{dailyForecast.map((item, index) => (
|
|
<div
|
|
key={index}
|
|
className={`flex items-center justify-between p-4 rounded-lg ${
|
|
isDayTime ? "hover:bg-gray-50" : "hover:bg-gray-700"
|
|
} transition-colors`}
|
|
>
|
|
<div className="flex items-center">
|
|
<span
|
|
className={`text-lg font-medium w-12 ${
|
|
isDayTime ? "text-gray-700" : "text-gray-300"
|
|
}`}
|
|
>
|
|
{item.day}
|
|
</span>
|
|
{item.icon}
|
|
</div>
|
|
<span
|
|
className={`text-lg font-bold ${
|
|
isDayTime ? "text-gray-800" : "text-white"
|
|
}`}
|
|
>
|
|
{item.temp}
|
|
</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<h3
|
|
className={`text-2xl font-bold mb-6 ${
|
|
isDayTime ? "text-gray-800" : "text-gray-200"
|
|
}`}
|
|
>
|
|
{t('home.weatherServices')}
|
|
</h3>
|
|
{user?.role === "user" && (
|
|
<div
|
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
|
isDayTime ? "bg-white" : "bg-gray-800"
|
|
} transform hover:-translate-y-1`}
|
|
>
|
|
<div
|
|
className={`h-32 ${
|
|
isDayTime
|
|
? "bg-gradient-to-r from-blue-400 to-indigo-500"
|
|
: "bg-gradient-to-r from-blue-700 to-indigo-800"
|
|
} flex items-center justify-center`}
|
|
>
|
|
<CalendarClock className="text-white" size={48} />
|
|
</div>
|
|
<div className="p-6">
|
|
<h3
|
|
className={`text-xl font-semibold mb-2 ${
|
|
isDayTime ? "text-gray-800" : "text-white"
|
|
}`}
|
|
>
|
|
{t('home.viewObjectsTitle')}
|
|
</h3>
|
|
<p
|
|
className={`${
|
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
|
} mb-4`}
|
|
>
|
|
{t('home.viewObjectsDesc')}
|
|
</p>
|
|
<a
|
|
href="/gestionObjets"
|
|
className={`flex items-center ${
|
|
isDayTime
|
|
? "text-indigo-600 hover:text-indigo-700"
|
|
: "text-indigo-400 hover:text-indigo-300"
|
|
}`}
|
|
>
|
|
{t('home.viewObjectsBtn')} <ArrowRight size={16} className="ml-2" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{!token && (
|
|
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
|
<div
|
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
|
isDayTime ? "bg-white" : "bg-gray-800"
|
|
} transform hover:-translate-y-1`}
|
|
>
|
|
<div
|
|
className={`h-32 ${
|
|
isDayTime
|
|
? "bg-gradient-to-r from-blue-400 to-indigo-500"
|
|
: "bg-gradient-to-r from-blue-700 to-indigo-800"
|
|
} flex items-center justify-center`}
|
|
>
|
|
<UserPlus className="text-white" size={48} />
|
|
</div>
|
|
<div className="p-6">
|
|
<h3
|
|
className={`text-xl font-semibold mb-2 ${
|
|
isDayTime ? "text-gray-800" : "text-white"
|
|
}`}
|
|
>
|
|
{t('home.signupTitle')}
|
|
</h3>
|
|
<p
|
|
className={`${
|
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
|
} mb-4`}
|
|
>
|
|
{t('home.signupDesc')}
|
|
</p>
|
|
<a
|
|
href="/signup"
|
|
className={`flex items-center ${
|
|
isDayTime
|
|
? "text-indigo-600 hover:text-indigo-700"
|
|
: "text-indigo-400 hover:text-indigo-300"
|
|
}`}
|
|
>
|
|
{t('home.signupBtn')} <ArrowRight size={16} className="ml-2" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
|
isDayTime ? "bg-white" : "bg-gray-800"
|
|
} transform hover:-translate-y-1`}
|
|
>
|
|
<div
|
|
className={`h-32 ${
|
|
isDayTime
|
|
? "bg-gradient-to-r from-yellow-300 to-orange-400"
|
|
: "bg-gradient-to-r from-blue-700 to-indigo-800"
|
|
} flex items-center justify-center`}
|
|
>
|
|
<LogIn className="text-white" size={48} />
|
|
</div>
|
|
<div className="p-6">
|
|
<h3
|
|
className={`text-xl font-semibold mb-2 ${
|
|
isDayTime ? "text-gray-800" : "text-white"
|
|
}`}
|
|
>
|
|
{t('home.loginTitle')}
|
|
</h3>
|
|
<p
|
|
className={`${
|
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
|
} mb-4`}
|
|
>
|
|
{t('home.loginDesc')}
|
|
</p>
|
|
<a
|
|
href="/login"
|
|
className={`flex items-center ${
|
|
isDayTime
|
|
? "text-indigo-600 hover:text-indigo-700"
|
|
: "text-indigo-400 hover:text-indigo-300"
|
|
}`}
|
|
>
|
|
{t('home.loginBtn')} <ArrowRight size={16} className="ml-2" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{user?.role === "complexe" && (
|
|
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
|
<div
|
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
|
isDayTime ? "bg-white" : "bg-gray-800"
|
|
} transform hover:-translate-y-1`}
|
|
>
|
|
<div
|
|
className={`h-32 ${
|
|
isDayTime
|
|
? "bg-gradient-to-r from-green-400 to-teal-500"
|
|
: "bg-gradient-to-r from-green-700 to-teal-800"
|
|
} flex items-center justify-center`}
|
|
>
|
|
<RadioTower className="text-white" size={48} />
|
|
</div>
|
|
<div className="p-6">
|
|
<h3
|
|
className={`text-xl font-semibold mb-2 ${
|
|
isDayTime ? "text-gray-800" : "text-white"
|
|
}`}
|
|
>
|
|
{t('home.consultObjectsTitle')}
|
|
</h3>
|
|
<p
|
|
className={`${
|
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
|
} mb-4`}
|
|
>
|
|
{t('home.consultObjectsDesc')}
|
|
</p>
|
|
<a
|
|
href="/gestionObjets"
|
|
className={`flex items-center ${
|
|
isDayTime
|
|
? "text-indigo-600 hover:text-indigo-700"
|
|
: "text-indigo-400 hover:text-indigo-300"
|
|
}`}
|
|
>
|
|
{t('home.consultObjectsBtn')} <ArrowRight size={16} className="ml-2" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
|
isDayTime ? "bg-white" : "bg-gray-800"
|
|
} transform hover:-translate-y-1`}
|
|
>
|
|
<div
|
|
className={`h-32 ${
|
|
isDayTime
|
|
? "bg-gradient-to-r from-red-400 to-orange-500"
|
|
: "bg-gradient-to-r from-red-700 to-orange-800"
|
|
} flex items-center justify-center`}
|
|
>
|
|
<BadgePlus className="text-white" size={48} />
|
|
</div>
|
|
<div className="p-6">
|
|
<h3
|
|
className={`text-xl font-semibold mb-2 ${
|
|
isDayTime ? "text-gray-800" : "text-white"
|
|
}`}
|
|
>
|
|
{t('home.addObjTitle')}
|
|
</h3>
|
|
<p
|
|
className={`${
|
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
|
} mb-4`}
|
|
>
|
|
{t('home.addObjDesc')}
|
|
</p>
|
|
<a
|
|
href="/ajouterObjet"
|
|
className={`flex items-center ${
|
|
isDayTime
|
|
? "text-indigo-600 hover:text-indigo-700"
|
|
: "text-indigo-400 hover:text-indigo-300"
|
|
}`}
|
|
>
|
|
{t('home.addObjBtn')} <ArrowRight size={16} className="ml-2" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
{user?.role === "admin" && (
|
|
<div className="grid md:grid-cols-2 gap-8 mb-12">
|
|
<div
|
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
|
isDayTime ? "bg-white" : "bg-gray-800"
|
|
} transform hover:-translate-y-1`}
|
|
>
|
|
<div
|
|
className={`h-32 ${
|
|
isDayTime
|
|
? "bg-gradient-to-r from-green-400 to-teal-500"
|
|
: "bg-gradient-to-r from-green-700 to-teal-800"
|
|
} flex items-center justify-center`}
|
|
>
|
|
<TowerControl className="text-white" size={48} />
|
|
</div>
|
|
<div className="p-6">
|
|
<h3
|
|
className={`text-xl font-semibold mb-2 ${
|
|
isDayTime ? "text-gray-800" : "text-white"
|
|
}`}
|
|
>
|
|
{t('home.adminDashTitle')}
|
|
</h3>
|
|
<p
|
|
className={`${
|
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
|
} mb-4`}
|
|
>
|
|
{t('home.adminDashDesc')}
|
|
</p>
|
|
<a
|
|
href="/dashboard"
|
|
className={`flex items-center ${
|
|
isDayTime
|
|
? "text-indigo-600 hover:text-indigo-700"
|
|
: "text-indigo-400 hover:text-indigo-300"
|
|
}`}
|
|
>
|
|
{t('home.adminDashBtn')}
|
|
<ArrowRight size={16} className="ml-2" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
className={`rounded-2xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden ${
|
|
isDayTime ? "bg-white" : "bg-gray-800"
|
|
} transform hover:-translate-y-1`}
|
|
>
|
|
<div
|
|
className={`h-32 ${
|
|
isDayTime
|
|
? "bg-gradient-to-r from-red-400 to-orange-500"
|
|
: "bg-gradient-to-r from-red-700 to-orange-800"
|
|
} flex items-center justify-center`}
|
|
>
|
|
<RadioTower className="text-white" size={48} />
|
|
</div>
|
|
<div className="p-6">
|
|
<h3
|
|
className={`text-xl font-semibold mb-2 ${
|
|
isDayTime ? "text-gray-800" : "text-white"
|
|
}`}
|
|
>
|
|
{t('home.manageObjTitle')}
|
|
</h3>
|
|
<p
|
|
className={`${
|
|
isDayTime ? "text-gray-600" : "text-gray-300"
|
|
} mb-4`}
|
|
>
|
|
{t('home.manageObjDesc')}
|
|
</p>
|
|
<a
|
|
href="/gestion"
|
|
className={`flex items-center ${
|
|
isDayTime
|
|
? "text-indigo-600 hover:text-indigo-700"
|
|
: "text-indigo-400 hover:text-indigo-300"
|
|
}`}
|
|
>
|
|
{t('home.manageObjBtn')} <ArrowRight size={16} className="ml-2" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
<footer className={`py-12 ${isDayTime ? "bg-gray-100" : "bg-gray-900"}`}>
|
|
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
|
<div className="flex items-center mb-6 md:mb-0">
|
|
<Cloud
|
|
className={`${
|
|
isDayTime ? "text-indigo-600" : "text-indigo-400"
|
|
} mr-2`}
|
|
size={24}
|
|
/>
|
|
<span
|
|
className={`text-xl font-bold ${
|
|
isDayTime ? "text-gray-800" : "text-white"
|
|
}`}
|
|
>
|
|
VigiMétéo
|
|
</span>
|
|
</div>
|
|
<div
|
|
className={`text-sm ${
|
|
isDayTime ? "text-gray-600" : "text-gray-400"
|
|
}`}
|
|
>
|
|
{t('home.footerRights')}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default EnhancedWeatherHome;
|