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

replaced read more with clickable card

Browse source
This commit is contained in:
Kim, Jimin 2021-08-17 08:59:54 +09:00
parent f794f19ef6
commit 37fd671eac
1 changed files with 62 additions and 65 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -29,7 +29,22 @@ const StyledMetaContainer = styled.small`
})}; })};
` `
const StyledLink = styled(Link)` const StyledPostCard = styled.div`
box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
text-align: left;
margin-bottom: 2rem;
padding: 0;
&:hover {
box-shadow: ${(props) =>
theming.theme(props.theme.currentTheme, {
light: "0 4px 10px rgb(0 0 0 / 25%)",
dark: "0 4px 10px rgb(255 255 255 / 20%)",
})};
}
`
const StyledPostCardContentContainer = styled(Link)`
text-decoration: none; text-decoration: none;
color: ${(props) => color: ${(props) =>
@ -37,17 +52,6 @@ const StyledLink = styled(Link)`
light: theming.light.color1, light: theming.light.color1,
dark: theming.dark.color1, dark: theming.dark.color1,
})}; })};
&:hover {
text-decoration: underline;
}
`
const StyledPostCard = styled.div`
box-shadow: 0 4px 10px rgb(0 0 0 / 10%);
text-align: left;
margin-bottom: 20px;
padding: 1rem 2rem 2rem 2rem;
` `
const StyledPostCardContent = styled.div` const StyledPostCardContent = styled.div`
@ -72,22 +76,22 @@ export default class PostCard extends React.Component<PostCardProps> {
key={this.props.postData.url} key={this.props.postData.url}
className="card main-content" className="card main-content"
> >
<StyledTitle> <StyledPostCardContentContainer
<StyledLink to={process.env.PUBLIC_URL + this.props.postData.url}
to={`${process.env.PUBLIC_URL}${this.props.postData.url}`}
> >
{this.props.postData?.title <StyledTitle>
? this.props.postData.title {this.props.postData?.title || "No title"}
: "No title"}
</StyledLink>
</StyledTitle> </StyledTitle>
<StyledMetaContainer> <StyledMetaContainer>
<TagList direction="left"> <TagList direction="left">
{this.props.postData.tags ? ( {this.props.postData.tags ? (
this.props.postData.tags.map((tag) => { this.props.postData.tags.map((tag) => {
return ( return (
<Tag <Tag
key={this.props.postData.title + tag} key={
this.props.postData.title + tag
}
text={tag} text={tag}
/> />
) )
@ -97,9 +101,7 @@ export default class PostCard extends React.Component<PostCardProps> {
)} )}
</TagList> </TagList>
<FontAwesomeIcon icon={faCalendar} /> Published on{" "} <FontAwesomeIcon icon={faCalendar} /> Published on{" "}
{this.props.postData?.date {this.props.postData?.date || "Unknown date"}
? this.props.postData.date
: "Unknown date"}
&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;
<FontAwesomeIcon icon={faHourglass} />{" "} <FontAwesomeIcon icon={faHourglass} />{" "}
{this.props.postData?.readTime {this.props.postData?.readTime
@ -113,19 +115,14 @@ export default class PostCard extends React.Component<PostCardProps> {
</StyledMetaContainer> </StyledMetaContainer>
<hr /> <hr />
<StyledPostCardContent <StyledPostCardContent
className="white-link" className="white-link"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
__html: this.props.postData.preview, __html: this.props.postData.preview,
}} }}
></StyledPostCardContent> />
<small> </StyledPostCardContentContainer>
<StyledLink
to={process.env.PUBLIC_URL + this.props.postData.url}
>
<u>Read more</u>
</StyledLink>
</small>
</StyledPostCard> </StyledPostCard>
) )
} }