From bff517817830d7ad75489c54b45726b1a973b5ff Mon Sep 17 00:00:00 2001
From: Anna Viklund <annamariaviklund@gmail.com>
Date: Wed, 31 Jan 2024 21:38:13 +0100
Subject: [PATCH] Setup beta info component

---
 .../header/beta-info/beta-info.module.scss    | 23 +++++++++++++++++++
 .../components/header/beta-info/beta-info.tsx | 19 +++++++++++++++
 2 files changed, 42 insertions(+)
 create mode 100644 ui/src/components/header/beta-info/beta-info.module.scss
 create mode 100644 ui/src/components/header/beta-info/beta-info.tsx

diff --git a/ui/src/components/header/beta-info/beta-info.module.scss b/ui/src/components/header/beta-info/beta-info.module.scss
new file mode 100644
index 000000000..627873f47
--- /dev/null
+++ b/ui/src/components/header/beta-info/beta-info.module.scss
@@ -0,0 +1,23 @@
+@import 'src/design-system/variables/variables.scss';
+@import 'src/design-system/variables/colors.scss';
+@import 'src/design-system/variables/typography.scss';
+
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 16px;
+}
+
+.badge {
+  padding: 4px 16px;
+  border-radius: 4px;
+  background-color: $color-success-100;
+  color: $color-success-700;
+  @include label();
+}
+
+.version {
+  @include paragraph-x-small();
+  white-space: nowrap;
+}
diff --git a/ui/src/components/header/beta-info/beta-info.tsx b/ui/src/components/header/beta-info/beta-info.tsx
new file mode 100644
index 000000000..a2f5f77cf
--- /dev/null
+++ b/ui/src/components/header/beta-info/beta-info.tsx
@@ -0,0 +1,19 @@
+import { Tooltip } from 'design-system/components/tooltip/tooltip'
+import styles from './beta-info.module.scss'
+
+const COPY = {
+  LABEL: 'Beta',
+  INFO: 'More info about beta status goes here?',
+  VERSION: import.meta.env.PACKAGE_VERSION, // Read version from package.json
+}
+
+export const BetaInfo = () => {
+  return (
+    <div className={styles.wrapper}>
+      <Tooltip content={COPY.INFO}>
+        <div className={styles.badge}>{COPY.LABEL}</div>
+      </Tooltip>
+      <span className={styles.version}>Version {COPY.VERSION}</span>
+    </div>
+  )
+}