From 8e45c5310d48926d0b62960d0803abcc95ec1dbc Mon Sep 17 00:00:00 2001
From: Neeraj Rekwar <88387699+neerajrekwar@users.noreply.github.com>
Date: Sun, 8 Sep 2024 21:33:40 +0000
Subject: [PATCH] gfs

---
 app/components/DeviceAddress.tsx     |  8 ++----
 app/components/WeatherApp.tsx        | 37 +++++++++++++++++++++-------
 app/components/homeSectionHeader.tsx |  6 ++---
 package-lock.json                    | 29 ++++++++++++++++++++++
 package.json                         |  1 +
 5 files changed, 62 insertions(+), 19 deletions(-)

diff --git a/app/components/DeviceAddress.tsx b/app/components/DeviceAddress.tsx
index 93fb276f7..41e40a178 100644
--- a/app/components/DeviceAddress.tsx
+++ b/app/components/DeviceAddress.tsx
@@ -43,7 +43,7 @@ const DeviceAddress: React.FC = () => {
           <motion.div
             initial={{ opacity: 0, x: 30 }}
             animate={{ opacity: 1, x: 0 }}
-            transition={{ delay: 4, duration: 2 }}
+            transition={{ delay: 4 }}
             className="flex text-xs overflow-y-hidden sm:text-sm gap-1 text-secondary justify-center items-center"
           >
             {/* <h2 className="text-2xl font-bold mb-4 text-center">Device Address</h2> */}
@@ -54,11 +54,7 @@ const DeviceAddress: React.FC = () => {
           </motion.div>
         ) : (
           <div className="text-center  p-2">
-            <motion.p
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 0.1, duration: 0.2 }}
-            >
+            <motion.p initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
               just a moment...
             </motion.p>
           </div>
diff --git a/app/components/WeatherApp.tsx b/app/components/WeatherApp.tsx
index cbd0f320a..1746dd182 100644
--- a/app/components/WeatherApp.tsx
+++ b/app/components/WeatherApp.tsx
@@ -18,7 +18,8 @@ const Weather: React.FC = () => {
           longitude: longitude,
           current_weather: true,
           temperature_unit: "celsius", // or "fahrenheit" if preferred
-          cloud_cover: "pecent",
+          hourly: "cloudcover,diffuse_radiation,rain,wind_speed_10m", // Adding hourly wind speed data
+          wind_speed_unit: "kmh", // or "mph", "ms", "knots"
           timezone: "auto",
         },
       };
@@ -55,17 +56,35 @@ const Weather: React.FC = () => {
   return (
     <div>
       {error ? (
-        <motion.p
-          initial={{ opacity: 0, x: 30 }}
-          animate={{ opacity: 1, x: 0 }}
-          transition={{ delay: 4, duration: 2 }}
-        >
-          {error}
-        </motion.p>
+        <motion.p>{error}</motion.p>
       ) : weather ? (
         <div className="sm:text-sm">
           <motion.div>
-            <p className="">{weather.current_weather.temperature}°C</p>
+            <motion.p
+              initial={{ opacity: 0, x: 10 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 4 }}
+            >
+              {weather.current_weather.temperature}°C
+            </motion.p>
+            <motion.p
+              initial={{ opacity: 0, x: 10 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 6 }}
+            >
+              Cloud {weather.hourly.cloudcover[0]}%
+            </motion.p>
+            {/* <p>Diffuse Radiation: {weather.hourly.diffuse_radiation[0]} W/m²</p> */}
+            {/* <p>Rain: {weather.hourly.rain[0]} mm</p>{" "} */}
+            {/* Display hourly rain data */}
+            <motion.p
+              initial={{ opacity: 0, x: 30 }}
+              animate={{ opacity: 1, x: 0 }}
+              transition={{ delay: 8 }}
+            >
+              Wind {weather.hourly.wind_speed_10m[0]} km/h
+            </motion.p>{" "}
+            {/* Display hourly wind speed */}
           </motion.div>
         </div>
       ) : (
diff --git a/app/components/homeSectionHeader.tsx b/app/components/homeSectionHeader.tsx
index 67556d640..9e5503596 100644
--- a/app/components/homeSectionHeader.tsx
+++ b/app/components/homeSectionHeader.tsx
@@ -5,8 +5,6 @@ import DeviceAddress from "./DeviceAddress";
 import { AuroraBackgroundDemo } from "./BackgroundAurra";
 import Weather from "./WeatherApp";
 
-
-
 const alata = Alata({
   weight: "400",
   subsets: ["latin"],
@@ -29,13 +27,13 @@ export default function HomeSectionHeader() {
                 className=" text-secondary text-3xl sm:text-4xl md:text-5xl font-bold"
               >
                 {/* <i className="bg-white px-[.2rem] my-1 h-[3rem] rounded  border text-black not-italic"></i> */}
-                nee.
+                nee
               </Link>
             </div>
             <div className="">
               <div className="text-secondary pt-1  font-bold">
                 <DeviceAddress />
-                <Weather/>
+                <Weather />
               </div>
             </div>
           </div>
diff --git a/package-lock.json b/package-lock.json
index 1d80143e1..ab8281e4d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -23,6 +23,7 @@
         "framer-motion": "^11.3.31",
         "lucide-react": "^0.437.0",
         "next": "14.2.7",
+        "openmeteo": "^1.1.4",
         "react": "^18",
         "react-dom": "^18",
         "react-markdown": "^9.0.1",
@@ -1976,6 +1977,17 @@
         "node": ">=12.4.0"
       }
     },
+    "node_modules/@openmeteo/sdk": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/@openmeteo/sdk/-/sdk-1.14.1.tgz",
+      "integrity": "sha512-KGdpae5/BAPukD1mWa7uRLoawT96H2yZrDSkQ+tukmDpj+YlwLVVQNVVpJVudzFQiXGzGjlO+y5U0bzh5YvXPA==",
+      "dependencies": {
+        "flatbuffers": "^24.3.25"
+      },
+      "engines": {
+        "node": ">=12.0"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -6663,6 +6675,11 @@
         "node": "^10.12.0 || >=12.0.0"
       }
     },
+    "node_modules/flatbuffers": {
+      "version": "24.3.25",
+      "resolved": "https://registry.npmjs.org/flatbuffers/-/flatbuffers-24.3.25.tgz",
+      "integrity": "sha512-3HDgPbgiwWMI9zVB7VYBHaMrbOO7Gm0v+yD2FV/sCKj+9NDeVL7BOBYUuhWAQGKWOzBo8S9WdMvV0eixO233XQ=="
+    },
     "node_modules/flatted": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz",
@@ -8967,6 +8984,18 @@
         "wrappy": "1"
       }
     },
+    "node_modules/openmeteo": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/openmeteo/-/openmeteo-1.1.4.tgz",
+      "integrity": "sha512-TalTDl0M7JJoeRTf+rWiFZ9SLvoxm7KkFLOQqcSjCiYs+bVMhax1qtryJqeZ1RF4W4Xfsgcl9x+VC1z39ULCxA==",
+      "dependencies": {
+        "@openmeteo/sdk": "^1.11.4",
+        "flatbuffers": "^24.3.25"
+      },
+      "engines": {
+        "node": ">=12.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
diff --git a/package.json b/package.json
index 87ba10154..87d66fe56 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "framer-motion": "^11.3.31",
     "lucide-react": "^0.437.0",
     "next": "14.2.7",
+    "openmeteo": "^1.1.4",
     "react": "^18",
     "react-dom": "^18",
     "react-markdown": "^9.0.1",