From a856297002a1e05f8a9f66ce4e83111921cd8e72 Mon Sep 17 00:00:00 2001
From: Jackson Harper <jacksonh@gmail.com>
Date: Fri, 25 Mar 2022 14:37:37 -0700
Subject: [PATCH] Add LabelChip file

---
 .../web/components/elements/LabelChip.tsx     | 32 +++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 packages/web/components/elements/LabelChip.tsx

diff --git a/packages/web/components/elements/LabelChip.tsx b/packages/web/components/elements/LabelChip.tsx
new file mode 100644
index 000000000..ee39b1497
--- /dev/null
+++ b/packages/web/components/elements/LabelChip.tsx
@@ -0,0 +1,32 @@
+import { StyledText } from './StyledText'
+
+type LabelChipProps = {
+  text: string
+  color: string // expected to be a RGB hex color string
+}
+
+export function LabelChip(props: LabelChipProps): JSX.Element {
+  const hexToRgb = (hex: string) => {
+    const bigint = parseInt(hex.substring(1), 16)
+    const r = (bigint >> 16) & 255
+    const g = (bigint >> 8) & 255
+    const b = bigint & 255
+
+    return [r, g, b]
+  }
+  const color = hexToRgb(props.color)
+  return (
+    <StyledText
+      css={{
+        margin: '4px',
+        borderRadius: '32px',
+        color: props.color,
+        padding: '4px 8px 4px 8px',
+        border: `1px solid rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.40)`,
+        backgroundColor: `rgba(${color[0]}, ${color[1]}, ${color[2]}, 0.20)`,
+      }}
+    >
+      {props.text}
+    </StyledText>
+  )
+}