Add pomodoro timer

src/pages/honkai3rd/media/index.tsx

@@ -6,6 +6,7 @@ import Head from '../../../components/atoms/Head'
 import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 import { getI18NProps } from 'server/i18n'
 import { NextPageContext } from 'next'
+import NextLink from 'next/link'
 
 const MediaPage = () => {
   const { t } = useTranslation()
@@ -27,42 +28,51 @@ const MediaPage = () => {
         />
 
         <Heading as='h1'>{t('common.media')}</Heading>
-        <Heading as='h2'>{t('common.novels')}</Heading>
+        <Box sx={{ mb: 3 }}>
+          <Heading as='h2'>{t('common.novels')}</Heading>
 
-        <Box sx={{ mb: 3, pl: 2 }} as='ul'>
-          <Box as='li'>
-            <Link href={'/honkai3rd/novels/ae'} target='_blank'>
-              🇺🇸 Anti-Entropy Beta
-            </Link>
-          </Box>
-          <Box as='li'>
-            <Link href={'/honkai3rd/novels/duriduri'} target='_blank'>
-              🇺🇸 Durandal Beta
-            </Link>
-          </Box>
-          <Box as='li'>
-            <Link href={'/honkai3rd/novels/7s'} target='_blank'>
-              🇺🇸 Seven Swords (WIP)
-            </Link>
-          </Box>
-          <Box as='li'>
-            <Link href={'/ko-KR/honkai3rd/novels/ae'} target='_blank'>
-              🇰🇷 네겐트로피 Beta
-            </Link>
-          </Box>
-          <Box as='li'>
-            <Link href={'/ko-KR/honkai3rd/novels/duriduri'} target='_blank'>
-              🇰🇷 듀란달 Beta(작업중)
-            </Link>
-          </Box>
-          <Box as='li'>
-            <Link href={'/ko-KR/honkai3rd/novels/7s'} target='_blank'>
-              🇰🇷 신주절검록 (작업중)
-            </Link>
+          <Box sx={{ mb: 3, pl: 2 }} as='ul'>
+            <Box as='li'>
+              <Link href={'/honkai3rd/novels/ae'} target='_blank'>
+                🇺🇸 Anti-Entropy Beta
+              </Link>
+            </Box>
+            <Box as='li'>
+              <Link href={'/honkai3rd/novels/duriduri'} target='_blank'>
+                🇺🇸 Durandal Beta
+              </Link>
+            </Box>
+            <Box as='li'>
+              <Link href={'/honkai3rd/novels/7s'} target='_blank'>
+                🇺🇸 Seven Swords (WIP)
+              </Link>
+            </Box>
+            <Box as='li'>
+              <Link href={'/ko-KR/honkai3rd/novels/ae'} target='_blank'>
+                🇰🇷 네겐트로피 Beta
+              </Link>
+            </Box>
+            <Box as='li'>
+              <Link href={'/ko-KR/honkai3rd/novels/duriduri'} target='_blank'>
+                🇰🇷 듀란달 Beta(작업중)
+              </Link>
+            </Box>
+            <Box as='li'>
+              <Link href={'/ko-KR/honkai3rd/novels/7s'} target='_blank'>
+                🇰🇷 신주절검록 (작업중)
+              </Link>
+            </Box>
           </Box>
         </Box>
 
-        <Paragraph>Other novels will be available one day.</Paragraph>
+        <Heading as='h2'>Abyss Lab Custom</Heading>
+        <Box sx={{ mb: 3, pl: 2 }} as='ul'>
+          <Box as='li'>
+            <NextLink href='/honkai3rd/media/pomodoro' passHref>
+              <Link>Pomodoro Timer</Link>
+            </NextLink>
+          </Box>
+        </Box>
       </Box>
     </Honkai3rdLayout>
   )

src/pages/honkai3rd/media/pomodoro.tsx

@@ -0,0 +1,28 @@
+import { useEffect, useState } from 'react'
+import { Box, ThemeProvider } from 'theme-ui'
+import PomodoroAppMain from '../../../pomodoro/PomodoroAppMain'
+import { loadTimerEvents } from '../../../pomodoro/data'
+import { TimerEvent } from '../../../pomodoro/interfaces'
+import { theme } from '../../../pomodoro/theme'
+
+const PomodoroAppPage = () => {
+  const [initialized, setInitialized] = useState(false)
+  const [initialTimerEvents, setInitialTimerEvents] = useState<TimerEvent[]>([])
+  useEffect(() => {
+    setInitialTimerEvents(loadTimerEvents())
+    setInitialized(true)
+  }, [])
+
+  if (!initialized) {
+    return <Box>Loading</Box>
+  }
+  return (
+    <Box>
+      <ThemeProvider theme={theme}>
+        <PomodoroAppMain initialTimerEvents={initialTimerEvents} />
+      </ThemeProvider>
+    </Box>
+  )
+}
+
+export default PomodoroAppPage