/** @jsxImportSource theme-ui */
import { Box, Heading, Text, Flex, Link } from '@theme-ui/components'
import { useCallback, useEffect, useState } from 'react'
import Breadcrumb from '../../components/organisms/Breadcrumb'
import Honkai3rdNavigator from '../../components/organisms/Honkai3rdNavigator'
import { NextPageContext } from 'next'
import { getI18NProps } from '../../server/i18n'
import { useTranslation } from '../../lib/i18n'
import PageLink from '../../components/atoms/PageLink'
import SquareImageBox from '../../components/atoms/SquareImageBox'
import { mdiGithub } from '@mdi/js'
import { Icon } from '@mdi/react'
import Head from '../../components/atoms/Head'
import { assetsBucketBaseUrl } from '../../lib/consts'
const bannerValkyries = [
'kiana',
'mei',
'bronya',
'theresa',
'fuhua',
'bianka',
'rita',
'carole',
]
const Honkai3rdIndexPage = () => {
const { t } = useTranslation()
const [bannerIndex, setBannerIndex] = useState(0)
const switchBanner = useCallback(() => {
setBannerIndex((previousBannerIndex) => {
return (previousBannerIndex + 1) % bannerValkyries.length
})
}, [])
useEffect(() => {
const timer = setTimeout(() => {
switchBanner()
}, 5000)
return () => {
clearTimeout(timer)
}
}, [bannerIndex, switchBanner])
return (
{t('nav.honkai-3rd')}
{bannerValkyries.map((valkyrie, index) => (
))}
Source Code
)
}
export async function getStaticProps({ locale }: NextPageContext) {
return {
props: {
...(await getI18NProps(locale)),
},
}
}
export default Honkai3rdIndexPage
interface NavItemProps {
target: 'versions' | 'battlesuits' | 'stigmata' | 'weapons' | 'elfs'
}
const NavItem = ({ target }: NavItemProps) => {
const { t } = useTranslation()
return (
{t(`nav.${target}`)}
)
}
interface BannerItemProps {
valkyrie: string
active: boolean
}
const BannerItem = ({ valkyrie, active }: BannerItemProps) => {
return (
)
}