tor-browser

The Tor Browser
git clone https://git.dasho.dev/tor-browser.git
Log | Files | Refs | README | LICENSE

WeatherForecast.jsx (3846B)

      1 /* This Source Code Form is subject to the terms of the Mozilla Public
      2 * License, v. 2.0. If a copy of the MPL was not distributed with this
      3 * file, You can obtain one at https://mozilla.org/MPL/2.0/. */
      4 
      5 import { useSelector } from "react-redux";
      6 
      7 function WeatherForecast() {
      8  const prefs = useSelector(state => state.Prefs.values);
      9  const weatherData = useSelector(state => state.Weather);
     10 
     11  const WEATHER_SUGGESTION = weatherData.suggestions?.[0];
     12 
     13  const showDetailedView = prefs["weather.display"] === "detailed";
     14 
     15  if (!showDetailedView || !weatherData?.initialized) {
     16    return null;
     17  }
     18 
     19  return (
     20    <article className="weather-forecast-widget">
     21      <div className="city-wrapper">
     22        <h3>{weatherData.locationData.city}</h3>
     23      </div>
     24      <div className="current-weather-wrapper">
     25        <div className="weather-icon-column">
     26          <span
     27            className={`weather-icon iconId${WEATHER_SUGGESTION.current_conditions.icon_id}`}
     28          ></span>
     29        </div>
     30        <div className="weather-info-column">
     31          <span className="temperature-unit">
     32            {
     33              WEATHER_SUGGESTION.current_conditions.temperature[
     34                prefs["weather.temperatureUnits"]
     35              ]
     36            }
     37            &deg;{prefs["weather.temperatureUnits"]}
     38          </span>
     39          <span className="temperature-description">
     40            {WEATHER_SUGGESTION.current_conditions.summary}
     41          </span>
     42        </div>
     43        <div className="high-low-column">
     44          <span className="high-temperature">
     45            <span className="arrow-icon arrow-up" />
     46            {
     47              WEATHER_SUGGESTION.forecast.high[
     48                prefs["weather.temperatureUnits"]
     49              ]
     50            }
     51            &deg;
     52          </span>
     53 
     54          <span className="low-temperature">
     55            <span className="arrow-icon arrow-down" />
     56            {WEATHER_SUGGESTION.forecast.low[prefs["weather.temperatureUnits"]]}
     57            &deg;
     58          </span>
     59        </div>
     60      </div>
     61      <hr />
     62      <div className="forecast-row">
     63        <p
     64          className="today-forecast"
     65          data-l10n-id="newtab-weather-todays-forecast"
     66        ></p>
     67        <ul className="forecast-row-items">
     68          <li>
     69            <span>80&deg;</span>
     70            <span
     71              className={`weather-icon iconId${WEATHER_SUGGESTION.current_conditions.icon_id}`}
     72            ></span>
     73            <span>7:00</span>
     74          </li>
     75          <li>
     76            <span>80&deg;</span>
     77            <span
     78              className={`weather-icon iconId${WEATHER_SUGGESTION.current_conditions.icon_id}`}
     79            ></span>
     80            <span>7:00</span>
     81          </li>
     82          <li>
     83            <span>80&deg;</span>
     84            <span
     85              className={`weather-icon iconId${WEATHER_SUGGESTION.current_conditions.icon_id}`}
     86            ></span>
     87            <span>7:00</span>
     88          </li>
     89          <li>
     90            <span>80&deg;</span>
     91            <span
     92              className={`weather-icon iconId${WEATHER_SUGGESTION.current_conditions.icon_id}`}
     93            ></span>
     94            <span>7:00</span>
     95          </li>
     96          <li>
     97            <span>80&deg;</span>
     98            <span
     99              className={`weather-icon iconId${WEATHER_SUGGESTION.current_conditions.icon_id}`}
    100            ></span>
    101            <span>7:00</span>
    102          </li>
    103        </ul>
    104      </div>
    105 
    106      <div className="weather-forecast-footer">
    107        <a
    108          href="#"
    109          className="full-forecast"
    110          data-l10n-id="newtab-weather-see-full-forecast"
    111        ></a>
    112        <span
    113          className="sponsored-text"
    114          data-l10n-id="newtab-weather-sponsored"
    115          data-l10n-args='{"provider": "AccuWeather®"}'
    116        ></span>
    117      </div>
    118    </article>
    119  );
    120 }
    121 
    122 export { WeatherForecast };