Add SingleInstanceForecast

src/Components/SingleInstanceForecast/Component.css

@@ -0,0 +1,23 @@
+.SingleInstanceForecast {
+  position: relative;
+
+  margin: 1em 0;
+  padding-bottom: 0.25em;
+
+  font-size: 0.75em;
+}
+
+
+.SingleInstanceForecast .weather-icon-container {
+  padding: .25em 0;
+}
+
+.SingleInstanceForecast .bottom-dividor{
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  width: 1em;
+  height: 2px;
+  background-color: black;
+  transform: translateX(-50%);
+}

src/Components/SingleInstanceForecast/Component.tsx

@@ -0,0 +1,63 @@
+import * as React from 'react';
+import './Component.css';
+import '../../../node_modules/open-weather-icons/dist/css/open-weather-icons.css';
+import { ForecaseAtInstance, Utils } from '../../Utils';
+
+export interface SingleInstanceForecastProps {
+  forecastAtInstance: ForecaseAtInstance;
+}
+
+export class SingleInstanceForecast extends React.Component<SingleInstanceForecastProps, {}> {
+
+  constructor(props: SingleInstanceForecastProps) {
+    super(props);
+
+    this.props = props;
+
+    // this.state = { data: undefined };
+  }
+
+  componentWillUpdate(nextProps: SingleInstanceForecastProps) {
+    this.props = this.props;
+  }
+
+  render() {
+    const day = Utils.createDateFromEpochInIndiaTZ(this.props.forecastAtInstance.dt);
+    const forecastAtInstance = this.props.forecastAtInstance;
+    const defaultWeather = forecastAtInstance.weather[0];
+
+    return (
+      <div className="SingleInstanceForecast">
+        <div className="date">
+          At {day.format('h A')}
+        </div>
+
+        <div className="weather-icon-container">
+          <div className={`weather-icon owi owi-2x owi-${defaultWeather.icon}`} />
+        </div>
+
+        <div className="weather-description">
+          {Utils.stringToNormalCase(defaultWeather.description)}
+        </div>
+
+        <div className="temp" title={`Temperature : ${forecastAtInstance.main.temp.toFixed(0)}°C`}>
+          
+          <div className="temp-value">
+            {forecastAtInstance.main.temp.toFixed(0)}&deg;C
+          </div>
+          <div className="clearfix" />
+        </div>
+
+        <div className="humidity" title={`Humidity : ${forecastAtInstance.main.humidity.toFixed(0)} %`}>
+          
+          <div className="humidity-value">
+            {forecastAtInstance.main.humidity.toFixed(0)} %
+          </div>
+          <div className="clearfix" />
+        </div>
+
+        <div className="bottom-dividor" />
+      </div>
+    );
+  }
+}

src/Components/SingleInstanceForecast/index.tsx

@@ -0,0 +1 @@
+export { SingleDayForecast } from './Component';