From 3e997120b347184bd2470f2991b2cf613ba7ffc0 Mon Sep 17 00:00:00 2001
From: Joe Banks <joseph@josephbanks.me>
Date: Mon, 28 Sep 2020 03:18:58 +0100
Subject: Refactor tag to separate component

---
 src/components/FormListing.tsx | 13 +++----------
 src/components/Tag.tsx         | 25 +++++++++++++++++++++++++
 2 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Tag.tsx

(limited to 'src/components')

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;
-- 
cgit v1.2.3