Side widget update

sidePrevious.css

@@ -0,0 +1,90 @@
+.side-widget {
+    width: 350px; 
+    height: 450px;
+    border-radius: 25px;
+    background-color: rgba(246, 246, 246, 0.5);
+
+    box-shadow: 0 6px 60px 5px rgba(0, 0, 0, 0.75); 
+    backdrop-filter: blur(10px);
+
+    color: #000;
+
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-start;
+
+    position: absolute;
+    top: 25vh; 
+    right: 5rem; 
+}
+.side-widget-header {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-between;
+    align-items: center;
+
+    font-size: 20px;
+    font-weight: 400;
+
+    width: 90%;
+    margin-top: 2rem;
+    margin-left: 5%;
+}
+
+.side-widget-location {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+}
+
+.side-widget-safety-status {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    color: #53BB2F;
+}
+
+.side-widget-body {
+    margin-top: 2rem;
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    max-height: 200px;
+}
+
+.side-widget-temperature {
+    margin-left: 5rem;
+    font-size: 180px;
+    font-weight: 800;
+
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+}
+
+.side-widget-degree-sign {
+    margin-top: -80px;
+    font-size: 64px;
+    font-weight: 800;
+}
+
+.side-widget-footer {
+    margin-left: 5.5rem;
+
+    display: flex;
+    align-items: center;
+    gap: 4px;
+
+    color: #747474;
+    font-weight: 400;
+    font-size: 20px;
+}
+
+.side-widget-vertical-separator {
+    font-size: 14px;
+    color: #909090;
+    margin-left: 0.5rem;
+    margin-right: 0.5rem;
+}

sidePrevious.js

@@ -0,0 +1,27 @@
+import React from 'react';
+
+function PreviousWeatherWidget() {
+    // Placeholder 
+    const previousWeather = [
+        { date: '2024-03-14', temperature: '15°C', condition: 'Windy' },
+        { date: '2024-03-13', temperature: '13°C', condition: 'Light Rain' },
+        { date: '2024-03-12', temperature: '12°C', condition: 'Heavy Rain' }
+    ];
+
+    return (
+        <div className="previous-weather-widget">
+            <h2>Previous Day's Weather</h2>
+            <ul>
+                {previousWeather.map((dayWeather, index) => (
+                    <li key={index}>
+                        <div>Date: {dayWeather.date}</div>
+                        <div>Temperature: {dayWeather.temperature}</div>
+                        <div>Condition: {dayWeather.condition}</div>
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+}
+
+export default PreviousWeatherWidget;

src/components/sidePrevious.css

@@ -0,0 +1,48 @@
+.side-widget {
+    width: 350px; 
+    height: 450px;
+    border-radius: 25px;
+    background-color: rgba(246, 246, 246, 0.5);
+
+    box-shadow: 0 6px 60px 5px rgba(0, 0, 0, 0.75); 
+    backdrop-filter: blur(10px);
+
+    color: #000;
+
+    display: flex;
+    flex-flow: column;
+    justify-content: flex-start;
+
+    position: absolute;
+    top: 25vh; 
+    right: 5rem; 
+}
+
+.side-widget-heading {
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    margin-top: 20px; 
+}
+
+.previous-day-container {
+    text-align: center;
+    font-size: 24px;
+    font-weight: bold;
+    margin-top: 20px;
+}
+.previous-day-layout {
+    padding: 10px;
+    border-bottom: 1px solid #ccc; 
+    width: 80%; 
+    max-width: 300px; 
+    text-align: center;
+    margin-bottom: 10px;
+}
+
+.previous-day-img {
+    width: 50px; 
+    height: auto; 
+    margin-right: 10px; 
+    border-radius: 50%;
+}

src/components/sidePrevious.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import './sidePrevious.css'
+import windyimg from '../../assets/icons/ui/windyWeather.png'
+import sunnyimg from '../../assets/icons/ui/sunnyWeather.png'
+import stormyimg from '../../assets/icons/ui/stormyWeather.png'
+import lrainimg from '../../assets/icons/ui/lrainWeather.png'
+import hrainimg from '../../assets/icons/ui/hrainWeather.png'
+import partlycloudyimg from '../../assets/icons/ui/partlycloudyWeather.png'
+import snowyimg from '../../assets/icons/ui/snowyWeather.png'
+
+function PreviousWeatherWidget() {
+    function getPreviousDays() {
+        const today = new Date();
+        const previousDays = [];
+
+        for (let i = 1; i <= 3; i++) {
+            const previousDay = new Date(today);
+            previousDay.setDate(today.getDate() - i);
+            previousDays.push(previousDay.toISOString().split('T')[0]); 
+        }
+
+        return previousDays;
+    }
+
+    const previousWeather = [
+        { date: getPreviousDays()[0], rainfall: '0 mm', condition: 'Windy' },
+        { date: getPreviousDays()[1], rainfall: '6 mm', condition: 'Light Rain' },
+        { date: getPreviousDays()[2], rainfall: '16 mm', condition: 'Heavy Rain' }
+    ];
+
+    return (
+        <div className="side-widget">
+            <h2 className ="side-widget-heading">Previous Day's Weather</h2>
+            <div className ="previous-day-img"></div>
+            <div className="previous-day-container">
+                {previousWeather.map((dayWeather, index) => (
+                     <div key={index} className="previous-day-layout">
+                        <div>{dayWeather.date}</div>
+                        <div>Rainfall: {dayWeather.rainfall}</div>
+                        <div>Condition: {dayWeather.condition}</div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    );
+}
+
+export default PreviousWeatherWidget;