feat(app): implment basic content of new tab page (#5)

async3619 · Oct 27, 2024 · 3ef91cf · 3ef91cf
1 parent f9db5a9
commit 3ef91cf
Show file tree

Hide file tree

Showing 14 changed files with 409 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -2,6 +2,9 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap" rel="stylesheet">
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

diff --git a/package.json b/package.json
@@ -13,8 +13,10 @@
     "@emotion/css": "^11.13.4",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "dayjs": "^1.11.13",
     "lodash": "^4.17.21",
     "normalize.css": "^8.0.1",
+    "openmeteo": "^1.1.4",
     "raindrop-fx": "^1.0.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/App.styled.ts b/src/App.styled.ts
@@ -11,20 +11,33 @@ export const GlobalStyles = css`
   * {
     font-family: 'SUITE Variable', sans-serif;
   }
+
+  html,
+  body {
+    color: white;
+  }
 `
 
 export const Root = styled.main``
 
-export const Content = styled.div`
+export const Content = styled.div<{ isReady: boolean }>`
   width: 100%;
 
   padding: ${({ theme }) => theme.spacing(2)};
   box-sizing: border-box;
 
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
   position: fixed;
   top: 0;
   left: 0;
 
+  opacity: ${({ isReady }) => (isReady ? 1 : 0)};
+
+  transition: opacity 1s;
+
   @supports (height: 100svh) {
     height: 100svh;
   }

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,19 +1,55 @@
+import { useEffect } from 'react'
 import { Global, ThemeProvider } from '@emotion/react'
 
 import BackgroundCanvas from '@components/BackgroundCanvas'
 import Settings from '@components/Settings'
+import Clock from '@components/Clock'
 
 import spacing from '@utils/spacing'
+import getCurrentGeolocation from '@utils/getCurrentGeolocation'
+import getCurrentWeather from '@utils/getCurrentWeather'
+
+import useSessionAppStore from '@stores/session-app'
+import useAppStore from '@stores/app'
 
 import * as Styled from './App.styled'
 
 function App() {
+  const isReady = useSessionAppStore((store) => store.isReady)
+
+  const geolocation = useAppStore((store) => store.geolocation)
+  const setGeolocation = useAppStore((store) => store.setGeolocation)
+
+  const weather = useAppStore((store) => store.weather)
+  const setWeather = useAppStore((store) => store.setWeather)
+
+  useEffect(() => {
+    if (!geolocation) {
+      return
+    }
+
+    getCurrentGeolocation().then(setGeolocation).catch()
+  }, [geolocation, setGeolocation])
+
+  useEffect(() => {
+    if (!geolocation) {
+      return
+    }
+
+    if (weather && weather.expiresAt > Date.now()) {
+      return
+    }
+
+    getCurrentWeather(geolocation).then(setWeather).catch()
+  }, [geolocation, setWeather, weather])
+
   return (
     <ThemeProvider theme={{ spacing }}>
       <Global styles={Styled.GlobalStyles} />
       <Styled.Root>
         <BackgroundCanvas />
-        <Styled.Content>
+        <Styled.Content isReady={isReady}>
+          <Clock />
           <Settings />
         </Styled.Content>
       </Styled.Root>

diff --git a/src/components/BackgroundCanvas.tsx b/src/components/BackgroundCanvas.tsx
@@ -1,19 +1,21 @@
-import { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef } from 'react'
 import RaindropFX from 'raindrop-fx'
 
 import useAppStore from '@stores/app'
+import useSessionAppStore from '@stores/session-app'
 
 import * as Styled from './BackgroundCanvas.styled'
 
 function BackgroundCanvas() {
-  const [isReady, setIsReady] = useState(false)
-
+  const isReady = useSessionAppStore((store) => store.isReady)
   const isPropertyChanging = useAppStore((store) => store.isPropertyChanging)
   const dimmingAmount = useAppStore((store) => store.dimmingAmount)
   const blurAmount = useAppStore((store) => store.blurAmount)
   const backgroundImage =
     useAppStore((store) => store.backgroundImage) ?? '/img.png'
 
+  const setIsReady = useSessionAppStore((store) => store.setIsReady)
+
   const viewportRef = useRef<HTMLCanvasElement>(null)
   const raindropsRef = useRef<RaindropFX | null>(null)
 
@@ -53,7 +55,7 @@ function BackgroundCanvas() {
     return () => {
       raindropsRef.current?.stop()
     }
-  }, [backgroundImage])
+  }, [backgroundImage, setIsReady])
 
   useEffect(() => {
     const onResize = () => {

diff --git a/src/components/Clock.styled.ts b/src/components/Clock.styled.ts
@@ -0,0 +1,39 @@
+import styled from '@emotion/styled'
+
+export const Root = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  user-select: none;
+`
+
+export const Date = styled.span`
+  display: block;
+
+  font-size: 28px;
+  font-family: 'Azeret Mono', monospace;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+  text-align: center;
+
+  color: rgba(255, 255, 255, 0.5);
+`
+
+export const Weather = styled(Date)`
+  margin-top: 8px;
+
+  font-size: 18px;
+`
+
+export const Time = styled.span`
+  display: block;
+
+  font-size: 94px;
+  font-family: 'Azeret Mono', monospace;
+  font-optical-sizing: auto;
+  font-weight: 400;
+  font-style: normal;
+
+  color: rgba(255, 255, 255, 0.75);
+`
diff --git a/src/components/Clock.tsx b/src/components/Clock.tsx
@@ -0,0 +1,36 @@
+import { useEffect, useState } from 'react'
+
+import dayjs from 'dayjs'
+
+import useAppStore from '@stores/app'
+
+import * as Styled from './Clock.styled'
+
+function Clock() {
+  const [time, setTime] = useState(() => dayjs())
+  const weather = useAppStore((store) => store.weather?.weather)
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTime(dayjs())
+    }, 500)
+
+    return () => {
+      clearInterval(interval)
+    }
+  }, [])
+
+  return (
+    <Styled.Root>
+      <Styled.Time>{time.format('HH·mm·ss')}</Styled.Time>
+      <Styled.Date>{time.format('YYYY·MM·DD')}</Styled.Date>
+      {weather && (
+        <Styled.Weather>
+          {weather.weatherName} {Math.round(weather.temperature * 10) / 10}°C
+        </Styled.Weather>
+      )}
+    </Styled.Root>
+  )
+}
+
+export default Clock