initial commit

src/components/StatusBadge.js

@@ -0,0 +1,25 @@
+/**
+ * Renders a colored status badge.
+ * @param {{ status: string }} props
+ * @returns {import('react').ReactNode}
+ */
+export default function StatusBadge({ status }) {
+  const colors = {
+    running: 'bg-status-green/20 text-status-green border-status-green/30',
+    stopped: 'bg-status-red/20 text-status-red border-status-red/30',
+    paused: 'bg-status-yellow/20 text-status-yellow border-status-yellow/30',
+  };
+  const colorClass = colors[status] || 'bg-status-gray/20 text-status-gray border-status-gray/30';
+
+  return (
+    <span className={`inline-flex items-center gap-1 rounded-full border px-2 py-0.5 text-xs font-medium capitalize ${colorClass}`}>
+      <span className={`h-1.5 w-1.5 rounded-full ${
+        status === 'running' ? 'bg-status-green' :
+        status === 'stopped' ? 'bg-status-red' :
+        status === 'paused' ? 'bg-status-yellow' :
+        'bg-status-gray'
+      }`} />
+      {status}
+    </span>
+  );
+}