From eca28c9fede8fa20a3880e575b7132cd04ad445f Mon Sep 17 00:00:00 2001
From: Mathis <avnyr@yidhra.fr>
Date: Fri, 27 Sep 2024 16:58:10 +0200
Subject: [PATCH] feat(component): add weather sprite and temperature display

Enhanced HomePage with WeatherSprite component for current weather. Added temperature display showing max and min values, including visual separators for better UI organization.
---
 src/app/page.tsx | 30 ++++++++++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 7060b93..5c552f6 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -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>);
 }