From a110179f8e07eea3cf1d1979018c0f2398848c69 Mon Sep 17 00:00:00 2001
From: developomp <developomp@gmail.com>
Date: Tue, 3 Aug 2021 14:18:28 +0900
Subject: [PATCH] added default and optional flex direction

---
 source/src/components/PostCard.tsx |  2 +-
 source/src/components/TagList.tsx  | 17 ++++++++++++-----
 2 files changed, 13 insertions(+), 6 deletions(-)

diff --git a/source/src/components/PostCard.tsx b/source/src/components/PostCard.tsx
index 8d23902..0df5311 100644
--- a/source/src/components/PostCard.tsx
+++ b/source/src/components/PostCard.tsx
@@ -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 (
diff --git a/source/src/components/TagList.tsx b/source/src/components/TagList.tsx
index e38614e..65c2382 100644
--- a/source/src/components/TagList.tsx
+++ b/source/src/components/TagList.tsx
@@ -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>
+		)
 	}
 }