added "show more posts" button

source/src/App.tsx

@@ -91,7 +91,7 @@ const App = () => {
 					<Loading />
 				) : (
 					<Routes>
-						<Route path="/" element={<PostList howMany={5} title="Home" />} />
+						<Route path="/" element={<PostList title="Home" />} />
 						<Route path="/search" element={<Search />} />
 						<Route path="/portfolio" element={<Portfolio />} />
 						<Route path="/404" element={<NotFound />} />

source/src/pages/PostList/ShowMoreButton.tsx

@@ -0,0 +1,53 @@
+import styled from "styled-components"
+
+import theming from "../../styles/theming"
+
+const Button = styled.button`
+	/* size */
+
+	padding: 1rem;
+
+	/* styling */
+
+	display: inline-block;
+	border: none;
+	cursor: pointer;
+	border-radius: 0.5rem;
+
+	/* text */
+
+	text-align: center;
+	text-decoration: none;
+	font-size: 1rem;
+
+	/* colors */
+
+	color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: "black",
+			dark: "#CFD0D0",
+		})};
+	background-color: ${(props) =>
+		theming.theme(props.theme.currentTheme, {
+			light: theming.light.backgroundColor2,
+			dark: theming.dark.backgroundColor2,
+		})};
+
+	:hover {
+		background-color: ${(props) =>
+			theming.theme(props.theme.currentTheme, {
+				light: theming.light.backgroundColor0,
+				dark: theming.dark.backgroundColor0,
+			})};
+	}
+`
+
+interface Props {
+	action(): void
+}
+
+const ShowMoreButton = (props: Props) => {
+	return <Button onClick={props.action}>Show more posts...</Button>
+}
+
+export default ShowMoreButton

source/src/pages/PostList/index.tsx

@@ -7,12 +7,13 @@ import { useEffect, useState } from "react"
 import { Helmet } from "react-helmet-async"
 import styled from "styled-components"
 
-import PostCard from "../components/PostCard"
+import PostCard from "../../components/PostCard"
+import ShowMoreButton from "./ShowMoreButton"
 
-import _map from "../data/map.json"
+import _map from "../../data/map.json"
-import theming from "../styles/theming"
+import theming from "../../styles/theming"
 
-import { Map } from "../../types/types"
+import { Map } from "../../../types/types"
 
 const map: Map = _map
 
@@ -28,16 +29,16 @@ const StyledPostList = styled.div`
 
 interface Props {
 	title: string
-	howMany?: number
 }
 
 const PostList = (props: Props) => {
-	const howMany = props.howMany || 0
+	const [howMany, setHowMany] = useState(5)
+	const [postsLength, setPostsLength] = useState(0)
 	const [postCards, setPostCards] = useState<JSX.Element[]>([])
 
-	useEffect(() => {
+	const loadPostCards = () => {
 		let postCount = 0
-		const _postCards = [] as JSX.Element[]
+		const postCards = [] as JSX.Element[]
 
 		for (const date in map.date) {
 			if (postCount >= howMany) break
@@ -49,14 +50,19 @@ const PostList = (props: Props) => {
 
 				postCount++
 				const url: string = map.date[date][length - i - 1]
-				_postCards.push(
+				postCards.push(
 					<PostCard key={url} postData={{ url: url, ...map.posts[url] }} />
 				)
 			}
 		}
 
-		setPostCards(_postCards)
+		setPostCards(postCards)
-	}, [])
+	}
+
+	useEffect(() => {
+		loadPostCards()
+		setPostsLength(Object.keys(map.posts).length)
+	}, [howMany])
 
 	return (
 		<>
@@ -70,11 +76,16 @@ const PostList = (props: Props) => {
 					content={`${process.env.PUBLIC_URL}/icon/icon.svg`}
 				/>
 			</Helmet>
-
 			<StyledPostList>
-				<h1>{howMany > 0 ? `Recent ${howMany} Posts` : "All Posts"}</h1>
+				<h1>Recent Posts</h1>
-
 				{postCards}
+				{postsLength > howMany && (
+					<ShowMoreButton
+						action={() => {
+							setHowMany((prev) => prev + 5)
+						}}
+					/>
+				)}
 			</StyledPostList>
 		</>
 	)