210 Add a new doc component widget: <Label value="BETA"/>

Author: sebastienvermeille

src/components/Label/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styles from './styles.module.css';
+
+
+// Predefined label colors
+const labelColors = {
+    beta: '#9912ec',
+    // example to add other labels
+    // bug: '#d73a49',
+    // feature: '#28a745',
+};
+
+// Utility function to generate random colors
+const generateRandomColor = () => {
+    const letters = '0123456789ABCDEF';
+    let color = '#';
+    for (let i = 0; i < 6; i++) {
+        color += letters[Math.floor(Math.random() * 16)];
+    }
+    return color;
+};
+
+const Label = ({ value }) => {
+    // Determine the color for the label
+    const color = labelColors[value.toLowerCase()] || generateRandomColor();
+
+    return (
+        <span
+            className={styles.label}
+            style={{backgroundColor: color}}
+        >
+            {value.toUpperCase()}
+        </span>
+    );
+};
+
+export default Label;

src/components/Label/styles.module.css

@@ -0,0 +1,18 @@
+/* General Label Style */
+.label {
+    display: inline-block;
+    font-size: 12px; /* Similar to GitHub's small text */
+    font-weight: 600; /* Bold text */
+    color: #ffffff; /* Default text color (white) */
+    background-color: #6e5494; /* Default background color */
+    padding: 0.2em 0.6em; /* Padding for compact sizing */
+    border-radius: 2em; /* Rounded corners */
+    text-align: center;
+    white-space: nowrap; /* Prevent text wrapping */
+    vertical-align: middle;
+}
+
+/* Example hover effect */
+.label:hover {
+    opacity: 0.9; /* Slightly dim on hover */
+}