added default and optional flex direction
This commit is contained in:
parent
f731826368
commit
a110179f8e
2 changed files with 13 additions and 6 deletions
|
@ -70,7 +70,7 @@ export default class PostCard extends React.Component<PostCardProps> {
|
|||
</StyledLink>
|
||||
</StyledTitle>
|
||||
<small>
|
||||
<TagList>
|
||||
<TagList direction="left">
|
||||
{this.props.postData.tags ? (
|
||||
this.props.postData.tags.map((tag) => {
|
||||
return (
|
||||
|
|
|
@ -1,18 +1,25 @@
|
|||
import React from "react"
|
||||
import styled from "styled-components"
|
||||
|
||||
const StyledTagList = styled.div`
|
||||
const StyledTagList = styled.div<{ direction: string }>`
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
row-gap: 0.5rem;
|
||||
column-gap: 0.5rem;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
justify-content: ${({ direction }) => direction};
|
||||
`
|
||||
|
||||
export default class TagList extends React.Component {
|
||||
interface TagListProps {
|
||||
direction?: string
|
||||
}
|
||||
|
||||
export default class TagList extends React.Component<TagListProps> {
|
||||
render() {
|
||||
// eslint-disable-next-line react/prop-types
|
||||
return <StyledTagList>{this.props.children}</StyledTagList>
|
||||
return (
|
||||
<StyledTagList direction={this.props.direction || "center"}>
|
||||
{this.props.children}
|
||||
</StyledTagList>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue