pomp/pompy.dev
1
0
Fork 0
Code Issues 8 Pull requests Activity Actions

changed post card from div to a

Browse source
This commit is contained in:
Kim, Jimin 2022-02-14 10:15:20 +09:00
parent bc064e4307
commit 14737aa71d
1 changed files with 33 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

65
source/src/components/PostCard.tsx
View file

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