From 71f51fa98d41a371da391ef4c55fa60c2f584ddf Mon Sep 17 00:00:00 2001
From: Leon Xu <dcwinfield362@gmail.com>
Date: Fri, 18 Feb 2022 18:34:12 -0800
Subject: [PATCH] doc: update DailyForecast component

---
 src/components/DailyForecast.vue | 69 ++++++++++++++++++++++++++++++--
 1 file changed, 65 insertions(+), 4 deletions(-)

diff --git a/src/components/DailyForecast.vue b/src/components/DailyForecast.vue
index 4421f13..5c036f5 100644
--- a/src/components/DailyForecast.vue
+++ b/src/components/DailyForecast.vue
@@ -1,8 +1,69 @@
-<template></template>
+<template>
+  <div class="daily-forecast">
+    <div>
+      <span>
+        {{
+          new Date(this.day.dt * 1000).toLocaleString("en-us", {
+            weekday: "long",
+          })
+        }}</span
+      >
+    </div>
+    <div class="condition">
+      <img
+        :src="
+          require(`../../public/conditions/${this.day.weather[0].icon}.svg`)
+        "
+        alt=""
+      />
+    </div>
+    <div class="weather">
+      <span class="high">{{ Math.round(this.day.temp.max) }}</span>
+      <span class="low">{{ Math.round(this.day.temp.min) }}</span>
+    </div>
+  </div>
+</template>
 
 <script>
-export default {};
+export default {
+  name: "DailyForecast",
+  props: ["day"],
+};
 </script>
 
-<style>
-</style>
\ No newline at end of file
+<style lang="scss" scoped>
+.daily-forecast {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  color: #fff;
+
+  div {
+    flex: 1;
+  }
+
+  .condition {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    img {
+      width: 20px;
+    }
+  }
+
+  .weather {
+    display: flex;
+    justify-content: flex-end;
+
+    span {
+      min-width: 20px;
+    }
+
+    .high {
+      font-weight: 500;
+      margin-right: 12px;
+    }
+  }
+}
+</style>