Merge branch 'LabelsAndDetails' into hackathon

src/stories/components/Chip.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Chip } from 'src/views/components/common/Chip/Chip';
+
+const meta = {
+    title: 'Components/Common/Chip',
+    component: Chip,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+    },
+} satisfies Meta<typeof Chip>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'QR',
+    },
+};

src/views/components/common/Chip/Chip.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Text from '../Text/Text';
+
+
+export const flags = ["WR", "QR", "GC", "CD", "E", "II"]
+
+interface Props {
+    label: string;
+}
+
+/**
+ * A reusable chip component that follows the design system of the extension.
+ * @returns
+ */
+export function Chip({
+    label
+}: React.PropsWithChildren<Props>): JSX.Element {
+    return (
+        <Text as = {'div'} variant = 'h4'
+            style = {{
+                display: "inline-flex",
+                minWidth: "21px",
+                padding: "1px 4px",
+                justifyContent: "center",
+                alignItems: "center",
+                gap: "10px",
+                borderRadius: "8px",
+                background: "#FFD600", //Yellow
+            }}>
+            {label}
+        </Text>
+    );
+}