From 7cf9a19b8a4a2ecd431bcfdfbc250d9299b0e829 Mon Sep 17 00:00:00 2001 From: Saikiran-Sugurthi Date: Wed, 15 Oct 2025 17:30:59 +0530 Subject: [PATCH 1/2] Added Badge Component --- .../badge/react/badge-section/Badge.jsx | 75 +++++++++++++++++++ .../badge/react/badge-section/component.json | 23 ++++++ .../badge/react/badge-section/readme.md | 39 ++++++++++ 3 files changed, 137 insertions(+) create mode 100644 components/badge/react/badge-section/Badge.jsx create mode 100644 components/badge/react/badge-section/component.json create mode 100644 components/badge/react/badge-section/readme.md diff --git a/components/badge/react/badge-section/Badge.jsx b/components/badge/react/badge-section/Badge.jsx new file mode 100644 index 0000000..2893fdf --- /dev/null +++ b/components/badge/react/badge-section/Badge.jsx @@ -0,0 +1,75 @@ +"use client" + +import React from "react" + +// Color definitions for different schemes +const colorSchemes = { + default: { background: "#e4e6eb", color: "#050505" }, + danger: { background: "#fce8e6", color: "#c5221f" }, + success: { background: "#e6f4ea", color: "#1e8e3e" }, + warning: { background: "#fff0e1", color: "#d96f00" }, + info: { background: "#e8f0fe", color: "#1a73e8" }, + purple: { background: "#f3e8fd", color: "#632ca6" }, +} + +// --- Reusable Badge Component --- +const Badge = ({ children, colorScheme = "default" }) => { + const badgeStyle = { + ...styles.base, + ...colorSchemes[colorScheme], + } + return {children} +} + +// --- Main Preview Component to Render --- +export default function BadgePreview() { + return ( +
+
+

Badges

+
+ New + Complete + 99+ + Archived + Admin +
+
+
+ ) +} + +// All styles are defined in this object +const styles = { + previewContainer: { + fontFamily: "sans-serif", + padding: "2rem", + backgroundColor: "#f8f9fa", + borderRadius: "8px", + width: "100%", + boxSizing: "border-box", + }, + section: { + marginBottom: "1rem", + }, + heading: { + color: "#343a40", + borderBottom: "1px solid #dee2e6", + paddingBottom: "0.5rem", + marginBottom: "1rem", + }, + componentRow: { + display: "flex", + gap: "10px", + alignItems: "center", + }, + base: { + display: "inline-flex", + alignItems: "center", + padding: "0.25em 0.6em", + fontSize: "12px", + fontWeight: "600", + borderRadius: "16px", + lineHeight: "1.5", + }, +} \ No newline at end of file diff --git a/components/badge/react/badge-section/component.json b/components/badge/react/badge-section/component.json new file mode 100644 index 0000000..94d2c86 --- /dev/null +++ b/components/badge/react/badge-section/component.json @@ -0,0 +1,23 @@ +{ + "name": "badge", + "category": "display", + "framework": "react", + "tags": ["badge", "status", "indicator", "label"], + "author": "Saikiran-Sugurthi", + "license": "MIT", + "version": "1.0.0", + "preview": "A simple, non-interactive component for displaying status or labels.", + "props": [ + { + "name": "children", + "type": "ReactNode", + "description": "The content displayed inside the badge." + }, + { + "name": "colorScheme", + "type": "string", + "description": "The color scheme of the badge. Options: default, danger, success, warning, info, purple.", + "default": "default" + } + ] +} \ No newline at end of file diff --git a/components/badge/react/badge-section/readme.md b/components/badge/react/badge-section/readme.md new file mode 100644 index 0000000..cb86ce6 --- /dev/null +++ b/components/badge/react/badge-section/readme.md @@ -0,0 +1,39 @@ +# Badge + +A simple, non-interactive component for displaying status indicators, labels, or counts. + +**Author:** [@Saikiran-Sugurthi](https://github.com/Saikiran-Sugurthi) + +--- +## Features + +- Displays short, non-interactive status labels. +- Includes multiple built-in color schemes (success, danger, info, etc.). +- Self-contained styling using CSS-in-JS, requiring no external stylesheets. +- Lightweight and has no dependencies other than React. + +--- +## Props + +| Prop | Type | Default | Description | +| :------------ | :-------- | :-------- | :----------------------------------------------------------------- | +| `children` | ReactNode | `null` | The content to be displayed inside the badge. | +| `colorScheme` | string | "default" | The color scheme to use. Options: `default`, `danger`, `success`, `warning`, `info`, `purple`. | + +--- +## Usage + +```jsx +// Note: This assumes the Badge component logic has been extracted into its own file. +import Badge from "./Badge" + +function App() { + return ( +
+ Complete + New + In Progress + Archived +
+ ) +} \ No newline at end of file From 3b6d031ee4e36d1915601f9ae6c64c6ec5055bc6 Mon Sep 17 00:00:00 2001 From: Alireza Azimi Date: Thu, 16 Oct 2025 11:18:47 -0400 Subject: [PATCH 2/2] Update badge component category from 'display' to 'badge' and add 'badge' to UI metadata schema --- components/badge/react/badge-section/component.json | 4 ++-- packages/ui-metadata/schema.json | 3 ++- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/components/badge/react/badge-section/component.json b/components/badge/react/badge-section/component.json index 94d2c86..f29efd4 100644 --- a/components/badge/react/badge-section/component.json +++ b/components/badge/react/badge-section/component.json @@ -1,6 +1,6 @@ { "name": "badge", - "category": "display", + "category": "badge", "framework": "react", "tags": ["badge", "status", "indicator", "label"], "author": "Saikiran-Sugurthi", @@ -20,4 +20,4 @@ "default": "default" } ] -} \ No newline at end of file +} diff --git a/packages/ui-metadata/schema.json b/packages/ui-metadata/schema.json index cf70455..9f78c21 100644 --- a/packages/ui-metadata/schema.json +++ b/packages/ui-metadata/schema.json @@ -18,7 +18,8 @@ "progress", "slider", "overlay", - "dashboard" + "dashboard", + "badge" ] }, "framework": {