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

changed to function component. Fixed clickable area size.

Browse source
This commit is contained in:
Kim, Jimin 2021-09-08 13:02:12 +09:00
parent b2449b589c
commit 67d62676e3
1 changed files with 60 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,6 +1,5 @@
import React from "react"
import styled from "styled-components" import styled from "styled-components"
import { Link } from "react-router-dom" import { useHistory } from "react-router-dom"
import theming from "../theming" import theming from "../theming"
@ -15,21 +14,17 @@ import {
import { Post } from "../types/typings" import { Post } from "../types/typings"
const StyledPostCardContainer = styled(Link)` const StyledPostCard = styled.div`
text-decoration: none; box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
text-align: left;
margin-bottom: 2rem;
cursor: pointer;
color: ${(props) => color: ${(props) =>
theming.theme(props.theme.currentTheme, { theming.theme(props.theme.currentTheme, {
light: theming.light.color1, light: theming.light.color1,
dark: theming.dark.color1, dark: theming.dark.color1,
})}; })};
`
const StyledPostCard = styled.div`
box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
text-align: left;
margin-bottom: 2rem;
padding: 0;
&:hover { &:hover {
box-shadow: ${(props) => box-shadow: ${(props) =>
@ -69,29 +64,28 @@ interface PostCardProps {
postData: _PostDateBase postData: _PostDateBase
} }
export default class PostCard extends React.Component<PostCardProps> { export default function PostCard(props: PostCardProps) {
render() { const history = useHistory()
return ( return (
<StyledPostCardContainer
to={process.env.PUBLIC_URL + this.props.postData.url}
>
<StyledPostCard <StyledPostCard
key={this.props.postData.url} key={props.postData.url}
className="card main-content" className="card main-content"
onClick={() => {
history.push({
pathname: process.env.PUBLIC_URL + props.postData.url,
})
}}
> >
<StyledTitle> <StyledTitle>{props.postData?.title || "No title"}</StyledTitle>
{this.props.postData?.title || "No title"}
</StyledTitle>
<StyledMetaContainer> <StyledMetaContainer>
<TagList direction="left"> <TagList direction="left">
{this.props.postData.tags ? ( {props.postData.tags ? (
this.props.postData.tags.map((tag) => { props.postData.tags.map((tag) => {
return ( return (
<Tag <Tag
key={ key={props.postData.title + tag}
this.props.postData.title + tag
}
text={tag} text={tag}
/> />
) )
@ -102,18 +96,18 @@ export default class PostCard extends React.Component<PostCardProps> {
</TagList> </TagList>
<FontAwesomeIcon icon={faCalendar} /> <FontAwesomeIcon icon={faCalendar} />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
{this.props.postData?.date || "Unknown date"} {props.postData?.date || "Unknown date"}
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<FontAwesomeIcon icon={faHourglass} /> <FontAwesomeIcon icon={faHourglass} />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
{this.props.postData?.readTime {props.postData?.readTime
? this.props.postData.readTime + " read" ? props.postData.readTime + " read"
: "unknown length"} : "unknown length"}
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<FontAwesomeIcon icon={faBook} /> <FontAwesomeIcon icon={faBook} />
&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;
{this.props.postData?.wordCount {props.postData?.wordCount
? this.props.postData.wordCount + " words" ? props.postData.wordCount + " words"
: "unknown words"} : "unknown words"}
</StyledMetaContainer> </StyledMetaContainer>
@ -122,11 +116,9 @@ export default class PostCard extends React.Component<PostCardProps> {
<StyledPostCardContent <StyledPostCardContent
className="white-link" className="white-link"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: this.props.postData.preview, __html: props.postData.preview,
}} }}
/> />
</StyledPostCard> </StyledPostCard>
</StyledPostCardContainer>
) )
} }
}