From 76c99cd18e13f78fa0c700ef48cb06ec4a9b4054 Mon Sep 17 00:00:00 2001
From: madarsbiss <madars.biss@gmail.com>
Date: Fri, 16 Jul 2021 23:29:48 +0300
Subject: [PATCH] add weather icons

---
 .env.example   |  1 +
 next.config.js |  5 ++++-
 pages/index.js | 12 ++++++++++--
 3 files changed, 15 insertions(+), 3 deletions(-)
 create mode 100644 .env.example

diff --git a/.env.example b/.env.example
new file mode 100644
index 0000000..9b9ffe5
--- /dev/null
+++ b/.env.example
@@ -0,0 +1 @@
+OPENWEATHER_API_KEY=lngstr20
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 0d60710..43ce4ab 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,3 +1,6 @@
 module.exports = {
   reactStrictMode: true,
-}
+  images: {
+    domains: ["openweathermap.org"],
+  },
+};
diff --git a/pages/index.js b/pages/index.js
index 7798663..177dd98 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -16,6 +16,7 @@ export default function Home() {
     setWeatherData({ ...data });
     console.log(data);
   };
+
   return (
     <div className={styles.wrapper}>
       <h1>My weather app {input}</h1>
@@ -23,9 +24,16 @@ export default function Home() {
       <button onClick={clickHandler}>Send</button>
       {weatherData && (
         <>
-          <h1>
+          <Image
+            alt="weatherIcon"
+            src={`http://openweathermap.org/img/wn/${weatherData.weather[0].icon}@2x.png`}
+            height="300px"
+            width="300px"
+          />
+
+          <p>
             {weatherData.name}, {weatherData.sys.country}
-          </h1>
+          </p>
           <h1 className={styles.mainTemp}>
             {Math.round(weatherData.main.temp)}°
           </h1>