diff options
| -rw-r--r-- | src/components/FormListing.tsx | 13 | ||||
| -rw-r--r-- | src/components/Tag.tsx | 25 |
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; |