feat: add status badge components

[legend4tech]

Pull Request: Add Status Badge Component

Summary

Creates a reusable Badge component for displaying status indicators with dynamic color mapping and dark mode support.

Purpose

Provides a consistent way to display status badges throughout the application (e.g., bounty status, proposal status, governance states).

Changes

New Files

• frontend/src/components/ui/Badge.tsx - Main Badge component

Modified Files

• frontend/src/components/ui/index.ts - Exports Badge component
• frontend/src/types/ui.ts - Adds Badge type definitions

Features

Feature	Description
10 Status Variants	open, in-progress, completed, expired, draft, active, passed, rejected, executed, default
3 Size Options	sm, md, lg
Dark Mode	Full dark mode support for all variants
TypeScript	Full type safety with exported types
Accessible	Uses semantic <span> element with proper props forwarding

Color Mapping

Variant	Color
open, passed	Green
in-progress, active	Blue
completed	Stellar Slate/Navy
rejected	Red
executed	Purple
expired, draft	Gray
default	Navy

Usage

import { Badge } from '@/components/ui'

// Default size
<Badge variant="open">Open</Badge>

// Large completed badge
<Badge variant="completed" size="lg">Completed</Badge>

// Small in-progress badge
<Badge variant="in-progress" size="sm">In Progress</Badge>

// Custom className
<Badge variant="rejected" className="font-bold">Rejected</Badge>

Closes #88

[drips-wave]

@legend4tech Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

[legend4tech]

@gabito1451 pls merge

[gabito1451]

@legend4tech please resolve conflicts

[legend4tech]

@gabito1451 pls merge resolved