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>
|
</StyledLink>
|
||||||
</StyledTitle>
|
</StyledTitle>
|
||||||
<small>
|
<small>
|
||||||
<TagList>
|
<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 (
|
||||||
|
|
|
@ -1,18 +1,25 @@
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import styled from "styled-components"
|
import styled from "styled-components"
|
||||||
|
|
||||||
const StyledTagList = styled.div`
|
const StyledTagList = styled.div<{ direction: string }>`
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
row-gap: 0.5rem;
|
row-gap: 0.5rem;
|
||||||
column-gap: 0.5rem;
|
column-gap: 0.5rem;
|
||||||
flex-direction: row;
|
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() {
|
render() {
|
||||||
// eslint-disable-next-line react/prop-types
|
return (
|
||||||
return <StyledTagList>{this.props.children}</StyledTagList>
|
<StyledTagList direction={this.props.direction || "center"}>
|
||||||
|
{this.props.children}
|
||||||
|
</StyledTagList>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue