Refactor tag to separate component

2 files changed, 28 insertions, 10 deletions

diff --git a/src/components/FormListing.tsx b/src/components/FormListing.tsx
index 9b7eb08..66860da 100644
--- a/src/components/FormListing.tsx
+++ b/src/components/FormListing.tsx
@@ -4,6 +4,8 @@ import { css, jsx } from "@emotion/core";
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
 
+import Tag from "./Tag";
+
 import colors from "../colors";
 
 interface FormListingProps {
@@ -30,16 +32,7 @@ function FormListing(props: FormListingProps) {
   let closedTag;
 
   if (!props.open) {
-    closedTag = <span css={css`
-      font-size: 0.75em;
-      background-color: ${colors.error};
-      border-radius: 5px;
-      margin: 0;
-      padding-top: 3px;
-      margin-right: 5px;
-      padding-left: 5px;
-      padding-right: 5px;
-    `}>CLOSED</span>;
+    closedTag = <Tag text="CLOSED" color={colors.error}/>
   };
 
   return <div css={listingStyle}>
diff --git a/src/components/Tag.tsx b/src/components/Tag.tsx
new file mode 100644
index 0000000..9c96d94
--- /dev/null
+++ b/src/components/Tag.tsx
@@ -0,0 +1,25 @@
+/** @jsx jsx */
+import { css, jsx } from "@emotion/core";
+
+interface TagProps {
+    text: string,
+    color: string,
+    fontSize?: string
+}
+
+function Tag(props: TagProps) {
+    return <span css={css`
+        font-size: ${props.fontSize ? props.fontSize : "0.75em"};
+        background-color: ${props.color};
+        border-radius: 5px;
+        margin: 0;
+        padding-top: 3px;
+        margin-right: 5px;
+        padding-left: 5px;
+        padding-right: 5px;
+    `}>
+        {props.text}
+    </span>;
+}
+
+export default Tag;