feat(index): CurrentGachas

app/[locale]/page.tsx

@@ -17,6 +17,7 @@ import {
 } from '#components/indexPage/venusEvents'
 import RoutineCountdown from '#components/indexPage/RoutineCountdown'
 import { withMessages } from '#utils/withMessages'
+import CurrentGachas from '#components/indexPage/CurrentGachas'
 
 const MainPageSiteData = [
     {
@@ -72,6 +73,9 @@ const Home = ({ params: { locale } }: { params: { locale: string } }) => {
                 />
             </Flex>
             <Grid className="mt-3">
+                <GridCol span={12}>
+                    <CurrentGachas />
+                </GridCol>
                 <GridCol span={{ base: 12, lg: 6 }}>
                     <Stack gap={15} justify="center" className="mt-2">
                         {MainPageSiteData.map((items, _key) => (

components/indexPage/CurrentGachas.tsx

@@ -0,0 +1,68 @@
+import { Group, Progress, Tooltip } from '@mantine/core'
+import dayjs from 'dayjs'
+import { getTranslations } from 'next-intl/server'
+
+import GachaPickupList from './GachaPickupList'
+
+import AssetImage from '#components/AssetImage'
+import { fetchApi } from '#utils/fetchApi'
+import { ExtendedDateFormat, SOURCE_TIMEZONE } from '#utils/constants'
+
+const CurrentGachas = async () => {
+    const $t = await getTranslations('index')
+
+    const now = Number(new Date())
+    const gachas = (await fetchApi('Gacha')).filter(
+        (x) => now > Number(x.nowAfter) && now < Number(x.nowBefore),
+    )
+
+    return (
+        <Group wrap="nowrap" align="flex-start" className="overflow-x-auto">
+            {gachas.map((x, key) => {
+                const {
+                    name,
+                    bannerAssetId,
+                    nowAfter,
+                    nowBefore,
+                    pickupCards,
+                } = x
+                const startDate = dayjs(Number(nowAfter)).tz(SOURCE_TIMEZONE)
+                const endDate = dayjs(Number(nowBefore)).tz(SOURCE_TIMEZONE)
+                const localTimeString = `${$t('local_time')} ${startDate
+                    .local()
+                    .format(ExtendedDateFormat)} - ${endDate
+                    .local()
+                    .format(ExtendedDateFormat)}`
+                return (
+                    <div key={key}>
+                        <AssetImage
+                            name={`img_banner_l_${bannerAssetId}`}
+                            ratio={3}
+                            height="100px"
+                            alt={`Banner for ${name}`}
+                        />
+                        <div className="my-1">
+                            <b>{name}</b>
+                        </div>
+                        <div className="my-1">
+                            <Tooltip label={localTimeString}>
+                                <Progress
+                                    value={
+                                        100 *
+                                        ((now - Number(nowAfter)) /
+                                            (Number(nowBefore) -
+                                                Number(nowAfter)))
+                                    }
+                                    aria-label={localTimeString}
+                                />
+                            </Tooltip>
+                        </div>
+                        <GachaPickupList pickupCards={pickupCards} />
+                    </div>
+                )
+            })}
+        </Group>
+    )
+}
+
+export default CurrentGachas

components/indexPage/EventItem.tsx

@@ -7,16 +7,19 @@ import dayjs from 'dayjs'
 import dayjsUtc from 'dayjs/plugin/utc'
 import dayjsTz from 'dayjs/plugin/timezone'
 
-import { EventItem, EventType } from './types'
+import type { EventItem } from './types'
+import { EventType } from './types'
 
 import Paths from '#utils/paths'
-import { COMMON_DATE_FORMAT, SOURCE_TIMEZONE } from '#utils/constants'
+import {
+    COMMON_DATE_FORMAT,
+    ExtendedDateFormat,
+    SOURCE_TIMEZONE,
+} from '#utils/constants'
 
 dayjs.extend(dayjsUtc)
 dayjs.extend(dayjsTz)
 
-const ExtendedDateFormat = 'YYYY/M/D H:mm:ss'
-
 const EventItemBlock = ({ item }: { item: EventItem }) => {
     const $t = useTranslations('index')
 

components/indexPage/GachaPickupList.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { Button, Group, Tooltip } from '@mantine/core'
+import { useState } from 'react'
+
+import AssetImage from '#components/AssetImage'
+import type { APIResponseOf } from '#utils/api'
+import { Link } from '#utils/navigation'
+
+const GachaPickupList = ({
+    pickupCards,
+}: {
+    pickupCards: APIResponseOf<'Gacha'>[number]['pickupCards']
+}) => {
+    const [showAll, setShowAll] = useState(false)
+    const shownCards = showAll ? pickupCards : pickupCards.slice(0, 4)
+
+    return (
+        <Group gap="xs">
+            {shownCards.map(({ name, assetId, id }, kkey) => (
+                <Tooltip label={name} key={kkey}>
+                    <Link href={`/card/${id}`}>
+                        <AssetImage
+                            name={`img_card_thumb_1_${assetId}`}
+                            ratio={1}
+                            height="50px"
+                            alt={name}
+                        />
+                    </Link>
+                </Tooltip>
+            ))}
+            {!showAll && pickupCards.length > 4 && (
+                <Button
+                    size="xs"
+                    variant="outline"
+                    radius="xl"
+                    aria-label="Expand"
+                    onClick={() => {
+                        setShowAll(true)
+                    }}
+                >
+                    ...
+                </Button>
+            )}
+        </Group>
+    )
+}
+
+export default GachaPickupList

utils/constants.ts

@@ -7,3 +7,4 @@ export const PLACEHOLDER_SVG =
 export const COMMON_DATE_FORMAT = 'YYYY/M/D'
 export const SOURCE_TIMEZONE = 'Asia/Tokyo'
 export const NEXT_INTL_LOCALE_PREFIX = 'always'
+export const ExtendedDateFormat = 'YYYY/M/D H:mm:ss'