Mathis
eca28c9fed
Enhanced HomePage with WeatherSprite component for current weather. Added temperature display showing max and min values, including visual separators for better UI organization.
34 lines
1.3 KiB
TypeScript
34 lines
1.3 KiB
TypeScript
import Image from "next/image";
|
|
import WeatherSprite from "@/components/weather/animated-sprite";
|
|
import {Separator} from "@/components/ui/separator";
|
|
import {ChevronsLeftRightEllipsis, SeparatorVertical} from "lucide-react";
|
|
|
|
export default function HomePage() {
|
|
return (<main className="flex flex-row w-full h-screen p-2">
|
|
<div className={"flex flex-col justify-center items-center gap-1 h-fit w-fit text-xl px-3 py-2 font-bold rounded-xl relative bg-background"}>
|
|
<WeatherSprite
|
|
weather={3}
|
|
title={"Maintenant"}
|
|
className={""}
|
|
indicator={{type: "slippery"}}
|
|
/>
|
|
<Separator className={"h-1 rounded-2xl"}/>
|
|
<div className={"my-3 p-2 flex flex-col items-center"}>
|
|
<h2 className={"mb-2"}>Températures</h2>
|
|
<div className={"flex flex-row justify-center items-center gap-1"}>
|
|
<div>
|
|
<p className={"text-red-300"}>Max</p>
|
|
<p className={"text-blue-300"}>Min</p>
|
|
</div>
|
|
<ChevronsLeftRightEllipsis className={"w-12 h-12 rotate-90"}/>
|
|
<div>
|
|
<p className={"text-red-300"}>19,6°C</p>
|
|
<p className={"text-blue-300"}>11,2°C</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Separator className={"h-1 rounded-2xl"}/>
|
|
</div>
|
|
</main>);
|
|
}
|