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 { 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>
)
}