added default and optional flex direction

This commit is contained in:
Kim, Jimin 2021-08-03 14:18:28 +09:00
parent f731826368
commit a110179f8e
2 changed files with 13 additions and 6 deletions

View file

@ -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 (

View file

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