Mathis/forecast
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(component): add weather sprite and temperature display

Browse Source 
Enhanced HomePage with WeatherSprite component for current weather. Added temperature display showing max and min values, including visual separators for better UI organization.
This commit is contained in:
Mathis H (Avnyr) 2024-09-27 16:58:10 +02:00
parent 47361f453f
commit eca28c9fed
Signed by: Mathis
GPG Key ID: DD9E0666A747D126
1 changed files with 28 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
src/app/page.tsx
View File

@ -1,7 +1,33 @@
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-col items-center justify-center w-full h-screen">
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>);
}