diff --git a/webui/src/common/components/Badge/Badge.jsx b/webui/src/common/components/Badge/Badge.jsx new file mode 100644 index 0000000..2074bea --- /dev/null +++ b/webui/src/common/components/Badge/Badge.jsx @@ -0,0 +1,23 @@ +import React from 'react'; +import './styles.sass'; + +export const Badge = ({ + children, + variant = 'default', + size = 'md', + className = '', + ...rest +}) => { + const badgeClasses = [ + 'badge', + `badge--${variant}`, + `badge--${size}`, + className + ].filter(Boolean).join(' '); + + return ( + + {children} + + ); +}; \ No newline at end of file diff --git a/webui/src/common/components/Badge/index.js b/webui/src/common/components/Badge/index.js new file mode 100644 index 0000000..5ecac87 --- /dev/null +++ b/webui/src/common/components/Badge/index.js @@ -0,0 +1 @@ +export { Badge as default } from './Badge.jsx'; \ No newline at end of file diff --git a/webui/src/common/components/Badge/styles.sass b/webui/src/common/components/Badge/styles.sass new file mode 100644 index 0000000..134c09f --- /dev/null +++ b/webui/src/common/components/Badge/styles.sass @@ -0,0 +1,49 @@ +.badge + display: inline-flex + align-items: center + justify-content: center + border-radius: 12px + font-weight: 600 + text-transform: uppercase + letter-spacing: 0.5px + white-space: nowrap + + &--sm + padding: 0.125rem 0.5rem + font-size: 0.65rem + + &--md + padding: 0.25rem 0.75rem + font-size: 0.75rem + + &--lg + padding: 0.375rem 1rem + font-size: 0.85rem + + &--default + background: var(--bg-elev) + color: var(--text-dim) + + &--primary + background: rgba(15, 98, 254, 0.1) + color: #0f62fe + + &--success + background: rgba(22, 163, 74, 0.1) + color: #16a34a + + &--warning + background: rgba(245, 158, 11, 0.1) + color: #f59e0b + + &--danger + background: rgba(217, 48, 37, 0.1) + color: #d93025 + + &--admin + background: #e3f2fd + color: #1976d2 + + &--user + background: var(--bg-elev) + color: var(--text-dim) \ No newline at end of file