REDUX WEATHER

app/components/GoogleMap.tsx

@@ -0,0 +1,68 @@
+import {
+  APIProvider,
+  Map,
+  AdvancedMarker,
+  Pin,
+} from "@vis.gl/react-google-maps";
+
+import type { MapMouseEvent } from "@vis.gl/react-google-maps";
+import type { Coordinates } from "../store/slices/weatherSlice";
+
+import styles from "../page.module.css";
+
+type GoogleMapProps = {
+  currentCoords: Coordinates | null;
+  selectedCoords: Coordinates | null;
+  onMapClick: (event: MapMouseEvent) => void;
+};
+
+const API_KEY = "AIzaSyDbcmkOz0m2H2Eo5eum8Cm61U4jWCrn6rg";
+const MAP_ID = "a6a16c3d3827ae115b8017cd";
+
+export default function GoogleMap({
+  currentCoords,
+  selectedCoords,
+  onMapClick,
+}: GoogleMapProps) {
+  if (!currentCoords) {
+    return null;
+  }
+
+  return (
+    <APIProvider apiKey={API_KEY}>
+      <div className={styles.map}>
+        <Map
+          defaultCenter={{
+            lat: currentCoords.latitude,
+            lng: currentCoords.longitude,
+          }}
+          defaultZoom={10}
+          mapId={MAP_ID}
+          gestureHandling="greedy"
+          onClick={onMapClick}
+          style={{
+            width: "100%",
+            height: "400px",
+            border: "4px solid blue",
+          }}
+        >
+          {selectedCoords && (
+            <AdvancedMarker
+              position={{
+                lat: selectedCoords.latitude,
+                lng: selectedCoords.longitude,
+              }}
+              title="Selected location"
+            >
+              <Pin
+                background="#4285F4"
+                borderColor="#ffffff"
+                glyphColor="#ffffff"
+              />
+            </AdvancedMarker>
+          )}
+        </Map>
+      </div>
+    </APIProvider>
+  );
+}

app/components/WeatherCharts.tsx

@@ -0,0 +1,64 @@
+import {
+  Sparklines,
+  SparklinesLine,
+  SparklinesReferenceLine,
+} from "react-sparklines";
+
+import type { WeatherChart } from "../store/slices/weatherSlice";
+import styles from "../page.module.css";
+
+type WeatherChartsProps = {
+  charts: WeatherChart[];
+};
+
+export default function WeatherCharts({ charts }: WeatherChartsProps) {
+  if (charts.length === 0) {
+    return null;
+  }
+
+  return (
+    <section className={styles.weatherTable}>
+      <div className={styles.columnNameContainer}>
+        <div>City</div>
+        <div>Temperature</div>
+        <div>Humidity</div>
+        <div>Pressure</div>
+      </div>
+
+      {charts.map((chart) => (
+        <article key={chart.city} className={styles.weatherContainer}>
+          <div className={`${styles.card} ${styles.cityCard}`}>
+            <h2 className={styles.cityName}>{chart.city}</h2>
+          </div>
+
+          <div className={`${styles.card} ${styles.chartCard}`}>
+            <Sparklines data={chart.temps}>
+              <SparklinesLine color="#f59e0b" />
+              <SparklinesReferenceLine type="mean" />
+            </Sparklines>
+
+            <p>{chart.meanTemp}°F</p>
+          </div>
+
+          <div className={`${styles.card} ${styles.chartCard}`}>
+            <Sparklines data={chart.humidity}>
+              <SparklinesLine color="#38bdf8" />
+              <SparklinesReferenceLine type="mean" />
+            </Sparklines>
+
+            <p>{chart.meanHumidity}%</p>
+          </div>
+
+          <div className={`${styles.card} ${styles.chartCard}`}>
+            <Sparklines data={chart.pressure}>
+              <SparklinesLine color="#a78bfa" />
+              <SparklinesReferenceLine type="mean" />
+            </Sparklines>
+
+            <p>{chart.meanPressure} hPa</p>
+          </div>
+        </article>
+      ))}
+    </section>
+  );
+}

app/components/WeatherSearch.tsx

@@ -0,0 +1,53 @@
+import styles from "../page.module.css";
+
+type WeatherSearchProps = {
+  city: string;
+  onCityChange: (city: string) => void;
+  onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
+  onSetDefault: () => void;
+  onCurrentLocation: () => void;
+};
+
+export default function WeatherSearch({
+  city,
+  onCityChange,
+  onSubmit,
+  onSetDefault,
+  onCurrentLocation,
+}: WeatherSearchProps) {
+  return (
+    <>
+      <form className={styles.searchContainer} onSubmit={onSubmit}>
+        <input
+          className={styles.searchInput}
+          type="text"
+          value={city}
+          placeholder="Enter a city"
+          onChange={(event) => onCityChange(event.target.value)}
+        />
+
+        <button className={styles.buttonClass} type="submit">
+          Get Weather
+        </button>
+
+        <button
+          className={styles.buttonClass}
+          type="button"
+          onClick={onSetDefault}
+        >
+          Set as Default
+        </button>
+      </form>
+
+      <div className={styles.locationContainer}>
+        <button
+          className={styles.locationButton}
+          type="button"
+          onClick={onCurrentLocation}
+        >
+          Find Current Location
+        </button>
+      </div>
+    </>
+  );
+}

app/layout.jsx

@@ -0,0 +1,16 @@
+"use client";
+import "./globals.css";
+import { Inter } from "next/font/google";
+import { Provider } from "react-redux";
+import store from "./store/configureStore";
+const inter = Inter({ subsets: ["latin"] });
+
+export default function RootLayout({ children }) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>
+        <Provider store={store}>{children}</Provider>
+      </body>
+    </html>
+  );
+}