Implement tag component

1 files changed, 26 insertions, 0 deletions

diff --git a/src/components/tag.js b/src/components/tag.js
new file mode 100644
index 0000000..794497c
--- /dev/null
+++ b/src/components/tag.js
@@ -0,0 +1,26 @@
+import React from 'react'
+import FA from 'react-fontawesome'
+import { css } from 'emotion'
+import { margins, colours } from './globals'
+
+const tagIconStyle = css(`
+  margin-right: ${margins.xsm}px;
+`)
+
+export const Tag = p => {
+  const tagStyle = css(`
+    margin: 0 ${margins.sm}px;
+    padding: ${margins.xsm}px;
+    border-radius: 5px;
+    color: ${colours.background};
+    background: ${colours.main};
+    ${p.fontSize ? `font-size: ${p.fontSize}` : ''};
+    line-height: 1.5em;
+  `)
+  return (
+    <div className={tagStyle}>
+      <FA name="tag" className={tagIconStyle} />
+      {p.children}
+    </div>
+  )
+}