mokkenstorm.dev
because I got bored of customising my CV for every job
1import { StatusBadge } from "@cv/ui";
2
3# StatusBadge
4
5A status indicator component built on top of the Badge component with predefined status types.
6
7## Features
8
9- **Predefined statuses**: Active, inactive, pending, success, error, warning
10- **Color coding**: Automatic color assignment based on status
11- **Consistent styling**: Built on Badge component for consistency
12- **TypeScript**: Type-safe status values
13
14## Basic Usage
15
16```tsx
17import { StatusBadge } from "@cv/ui";
18
19function MyComponent() {
20 return <StatusBadge status="active" />;
21}
22```
23
24## Available Statuses
25
26### Active
27
28```tsx
29<StatusBadge status="active" />
30// Displays: Green badge with "Active" label
31```
32
33### Inactive
34
35```tsx
36<StatusBadge status="inactive" />
37// Displays: Gray badge with "Inactive" label
38```
39
40### Pending
41
42```tsx
43<StatusBadge status="pending" />
44// Displays: Yellow badge with "Pending" label
45```
46
47### Success
48
49```tsx
50<StatusBadge status="success" />
51// Displays: Green badge with "Success" label
52```
53
54### Error
55
56```tsx
57<StatusBadge status="error" />
58// Displays: Red badge with "Error" label
59```
60
61### Warning
62
63```tsx
64<StatusBadge status="warning" />
65// Displays: Orange badge with "Warning" label
66```
67
68## Custom Styling
69
70```tsx
71<StatusBadge status="active" className="text-lg" />
72```
73
74## Props
75
76| Prop | Type | Default | Description |
77| ----------- | -------------------------------------------------------------------------- | ------------ | ---------------------- |
78| `status` | `"active" \| "inactive" \| "pending" \| "success" \| "error" \| "warning"` | **required** | Status type |
79| `className` | `string` | `""` | Additional CSS classes |
80
81## Status Configuration
82
83| Status | Label | Color |
84| ---------- | ---------- | ------------ |
85| `active` | "Active" | `ctp-green` |
86| `inactive` | "Inactive" | `ctp-gray` |
87| `pending` | "Pending" | `ctp-yellow` |
88| `success` | "Success" | `ctp-green` |
89| `error` | "Error" | `ctp-red` |
90| `warning` | "Warning" | `ctp-orange` |
91
92## Implementation
93
94This component wraps the `Badge` component with predefined configurations for common status indicators, ensuring consistency across the application.