From 14737aa71d69edc380e98012970c63b7d685fd02 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Mon, 14 Feb 2022 10:15:20 +0900
Subject: [PATCH] changed post card from `div` to `a`

---
 source/src/components/PostCard.tsx | 65 +++++++++++++++---------------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/source/src/components/PostCard.tsx b/source/src/components/PostCard.tsx
index 717d146..3206c66 100644
--- a/source/src/components/PostCard.tsx
+++ b/source/src/components/PostCard.tsx
@@ -1,5 +1,5 @@
 import styled from "styled-components"
-import { useNavigate } from "react-router-dom"
+import { Link } from "react-router-dom"
 
 import { PostData } from "../../types/types"
 
@@ -55,41 +55,42 @@ interface Props {
 
 const PostCard = (props: Props) => {
 	const { postData } = props
-	const navigate = useNavigate()
 
 	return (
-		<StyledPostCard
-			onClick={() => navigate(process.env.PUBLIC_URL + postData.url)}
-		>
-			<StyledTitle>
-				{postData?.title || "No title"}
-				{/* show (series for regex matching "/series/<series-title>") */}
-				{/\/series\/[^/]*$/.test(postData.url) && " (series)"}
-			</StyledTitle>
+		<Link to={process.env.PUBLIC_URL + postData.url}>
+			<StyledPostCard>
+				<StyledTitle>
+					{postData?.title || "No title"}
+					{/* show (series for regex matching "/series/<series-title>") */}
+					{/\/series\/[^/]*$/.test(postData.url) && " (series)"}
+				</StyledTitle>
 
-			<br />
+				<br />
 
-			<StyledMetaContainer>
-				<TagList direction="left">
-					{postData.tags &&
-						postData.tags.map((tag) => {
-							return <Tag key={postData.title + tag} text={tag} />
-						})}
-				</TagList>
-				<hr />
-				<FontAwesomeIcon icon={faCalendar} />
-				&nbsp;&nbsp;&nbsp;
-				{postData?.date || "Unknown date"}
-				&nbsp;&nbsp;&nbsp;&nbsp;
-				<FontAwesomeIcon icon={faHourglass} />
-				&nbsp;&nbsp;&nbsp;
-				{postData?.readTime ? postData.readTime + " read" : "unknown length"}
-				&nbsp;&nbsp;&nbsp;&nbsp;
-				<FontAwesomeIcon icon={faBook} />
-				&nbsp;&nbsp;&nbsp;
-				{postData?.wordCount ? postData.wordCount + " words" : "unknown words"}
-			</StyledMetaContainer>
-		</StyledPostCard>
+				<StyledMetaContainer>
+					<TagList direction="left">
+						{postData.tags &&
+							postData.tags.map((tag) => {
+								return <Tag key={postData.title + tag} text={tag} />
+							})}
+					</TagList>
+					<hr />
+					<FontAwesomeIcon icon={faCalendar} />
+					&nbsp;&nbsp;&nbsp;
+					{postData?.date || "Unknown date"}
+					&nbsp;&nbsp;&nbsp;&nbsp;
+					<FontAwesomeIcon icon={faHourglass} />
+					&nbsp;&nbsp;&nbsp;
+					{postData?.readTime ? postData.readTime + " read" : "unknown length"}
+					&nbsp;&nbsp;&nbsp;&nbsp;
+					<FontAwesomeIcon icon={faBook} />
+					&nbsp;&nbsp;&nbsp;
+					{postData?.wordCount
+						? postData.wordCount + " words"
+						: "unknown words"}
+				</StyledMetaContainer>
+			</StyledPostCard>
+		</Link>
 	)
 }