gfs

neerajrekwar · Sep 8, 2024 · 8e45c53 · 8e45c53
1 parent 22d911f
commit 8e45c53
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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
diff --git 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",