- {media && }
+ {media && }
{config.showsTime && (
-
+
)}
+ {config.showsWeather && (
+
+
+
+ )}
)
}
diff --git a/src/newtab/Time.jsx b/src/newtab/Time.jsx
index 5f56874..daaa1f3 100644
--- a/src/newtab/Time.jsx
+++ b/src/newtab/Time.jsx
@@ -22,7 +22,7 @@ const Time = () => {
return (
-
{time}
+ {time}
)
}
diff --git a/src/newtab/Weather.jsx b/src/newtab/Weather.jsx
new file mode 100644
index 0000000..19e0d8f
--- /dev/null
+++ b/src/newtab/Weather.jsx
@@ -0,0 +1,89 @@
+import { useEffect, useState } from 'react'
+import { showToast } from '../components/Toast'
+import { settingsStorage } from '../helper'
+
+function Weather() {
+ const [weather, setWeather] = useState(null)
+ const [coords, setCoords] = useState(null)
+ const [unit, setUnit] = useState('C')
+
+ useEffect(() => {
+ async function getCoords() {
+ const savedCoords = await settingsStorage.get('coords')
+ setCoords(savedCoords)
+
+ if (!savedCoords) {
+ navigator.geolocation.getCurrentPosition(
+ (position) => {
+ const newCoords = {
+ latitude: position.coords.latitude,
+ longitude: position.coords.longitude,
+ }
+ settingsStorage.set('coords', newCoords)
+ setCoords(newCoords)
+ },
+ (error) => {
+ showToast(error.message)
+ console.error(error)
+ },
+ )
+ }
+ }
+ getCoords()
+ }, [])
+
+ useEffect(() => {
+ async function getWeather() {
+ const appid = await settingsStorage.get('weatherApiKey')
+ const unit = await settingsStorage.get('weatherUnit')
+ setUnit(unit)
+
+ if (!appid) {
+ return console.warn('Please provide weather API key in settings')
+ }
+ if (coords) {
+ fetch(
+ `https://api.openweathermap.org/data/2.5/weather?${new URLSearchParams({
+ lat: coords.latitude,
+ lon: coords.longitude,
+ appid,
+ units: unit === 'C' ? 'metric' : 'imperial',
+ })}`,
+ )
+ .then(async (res) => {
+ const json = await res.json()
+ if (res.ok) {
+ setWeather(json)
+ } else
+ throw new Error(json.message ?? 'Unknown error occurred while fetching weather data.')
+ })
+ .catch((error) => {
+ console.error(error)
+ showToast(error.message)
+ })
+ }
+ }
+
+ getWeather()
+ }, [coords])
+
+ if (!weather) {
+ return null
+ }
+
+ return (
+
+
+ Temperature: {weather.main.temp}°{unit}
+
+
Humidity: {weather.main.humidity}%
+
Pressure: {weather.main.pressure}hPa
+
+ 
+ {weather.weather[0].description}
+
+
+ )
+}
+
+export default Weather
diff --git a/src/newtab/index.jsx b/src/newtab/index.jsx
index db9a764..b01aad3 100644
--- a/src/newtab/index.jsx
+++ b/src/newtab/index.jsx
@@ -1,10 +1,12 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
+import { Toast, toastRef } from '../components/Toast'
import { NewTab } from './NewTab'
import './index.css'
ReactDOM.createRoot(document.getElementById('app')).render(
+
,
)
diff --git a/src/newtab/utils.js b/src/newtab/utils.js
new file mode 100644
index 0000000..0a604a9
--- /dev/null
+++ b/src/newtab/utils.js
@@ -0,0 +1,10 @@
+const rgbToHex = ([r, g, b]) =>
+ '#' +
+ [r, g, b]
+ .map((x) => {
+ const hex = x.toString(16)
+ return hex.length === 1 ? '0' + hex : hex
+ })
+ .join('')
+
+export { rgbToHex }
diff --git a/src/options/ConfigSection.jsx b/src/options/ConfigSection.jsx
index 4d5ae87..4f64796 100644
--- a/src/options/ConfigSection.jsx
+++ b/src/options/ConfigSection.jsx
@@ -3,15 +3,29 @@ import { settingsStorage } from '../helper'
const ConfigSection = ({ onConfigChanged }) => {
const [showsTime, setshowsTime] = useState(false)
+ const [showsWeather, setShowsWeather] = useState(false)
+ const [unit, setUnit] = useState('C')
+ const [apiKey, setApiKey] = useState(null)
const [blurValue, setBlurValue] = useState(0)
useEffect(() => {
settingsStorage.get().then((config) => {
setshowsTime(config.showsTime ?? false)
setBlurValue(config.blur ?? 0)
+ setApiKey(config.weatherApiKey)
+ setShowsWeather(config.showsWeather ?? false)
})
}, [])
+ // debounce saving apiKey to storage
+ useEffect(() => {
+ const timeout = setTimeout(() => {
+ if (apiKey) settingsStorage.set('weatherApiKey', apiKey)
+ }, 500)
+
+ return () => clearTimeout(timeout)
+ }, [apiKey])
+
return (
Config
@@ -29,6 +43,46 @@ const ConfigSection = ({ onConfigChanged }) => {
}}
/>
+