54 lines
1.5 KiB
TypeScript
54 lines
1.5 KiB
TypeScript
"use client"
|
|
|
|
import contentMap from "@developomp-site/content/exports/contentMap"
|
|
import { type ReactNode, useEffect, useState } from "react"
|
|
|
|
import PostCard from "@/components/PostCard"
|
|
import ShowMoreButton from "@/components/ShowMoreButton"
|
|
|
|
const totalPosts = Object.keys(contentMap.posts).length
|
|
|
|
export default function Home() {
|
|
const [howMany, setHowMany] = useState(5)
|
|
const [postCards, setPostCards] = useState<ReactNode[]>([])
|
|
|
|
useEffect(() => {
|
|
const postCards: ReactNode[] = []
|
|
|
|
for (const date of Object.keys(contentMap.date).reverse()) {
|
|
if (postCards.length >= howMany) break
|
|
|
|
for (let i = contentMap.date[date].length - 1; i >= 0; i--) {
|
|
if (postCards.length >= howMany) break
|
|
|
|
const content_id = contentMap.date[date][i]
|
|
|
|
postCards.push(
|
|
<PostCard
|
|
key={content_id}
|
|
postData={{
|
|
content_id: content_id,
|
|
...contentMap.posts[content_id],
|
|
}}
|
|
/>,
|
|
)
|
|
}
|
|
}
|
|
|
|
setPostCards(postCards)
|
|
}, [howMany])
|
|
|
|
return (
|
|
<div className="flex h-full w-full flex-col items-center gap-8">
|
|
<h1 className="text-center">Recent Posts</h1>
|
|
|
|
{postCards}
|
|
|
|
{totalPosts > howMany && (
|
|
<ShowMoreButton
|
|
action={() => setHowMany((prev) => prev + 10)}
|
|
/>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|