Skip to content
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
34 changes: 23 additions & 11 deletions app/[locale]/10years/page.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import { Suspense } from "react"
import { pick } from "lodash"
import dynamic from "next/dynamic"
import {
getMessages,
getTranslations,
Expand All @@ -13,6 +15,7 @@ import { Image } from "@/components/Image"
import MainArticle from "@/components/MainArticle"
import { ButtonLink } from "@/components/ui/buttons/Button"
import { LinkBox, LinkOverlay } from "@/components/ui/link-box"
import { Skeleton } from "@/components/ui/skeleton"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"

import { cn } from "@/lib/utils/cn"
Expand All @@ -27,14 +30,17 @@ import CountDown from "./_components/CountDown"
import { adoptionCards, adoptionStyles } from "./_components/data"
import InnovationSwiper from "./_components/InnovationSwiper"
import Stories from "./_components/Stories"
import TenYearGlobe from "./_components/TenYearGlobe"
import TenYearHero from "./_components/TenYearHero"
import { parseStoryDates } from "./_components/utils"

import { fetch10YearEvents } from "@/lib/api/fetch10YearEvents"
import { fetch10YearStories } from "@/lib/api/fetch10YearStories"
import TenYearLogo from "@/public/images/10-year-anniversary/10-year-logo.png"

const TenYearGlobe = dynamic(() => import("./_components/TenYearGlobe"), {
ssr: false,
})

// In seconds
const REVALIDATE_TIME = BASE_TIME_UNIT * 1

Expand Down Expand Up @@ -98,16 +104,22 @@ const Page = async ({ params }: { params: Promise<{ locale: Lang }> }) => {
local event or start your own celebration.
</p>
</div>
<div>
<TenYearGlobe
events={Object.values(fetched10YearEvents).flatMap((region) =>
region.events.map((event) => ({
...event,
lat: Number(event.lat),
lng: Number(event.lng),
}))
)}
/>
<div className="h-[max(fit,260px)] sm:h-[400px] md:h-[500px] lg:h-[600px]">
<Suspense
fallback={
<Skeleton className="mx-auto aspect-square h-full rounded-full bg-primary/20 blur-2xl" />
}
>
<TenYearGlobe
events={Object.values(fetched10YearEvents).flatMap((region) =>
region.events.map((event) => ({
...event,
lat: Number(event.lat),
lng: Number(event.lng),
}))
)}
/>
</Suspense>
</div>
</div>
</div>
Expand Down