init app

components/StatusBadge.tsx

@@ -0,0 +1,18 @@
+import type { OrderStatus } from "@/lib/types";
+
+const statusStyles: Record<OrderStatus, string> = {
+  pending: "bg-yellow-100 text-yellow-800 border-yellow-300",
+  purchased: "bg-blue-100 text-blue-800 border-blue-300",
+  delivered: "bg-green-100 text-green-800 border-green-300",
+  closed: "bg-gray-100 text-gray-600 border-gray-300",
+};
+
+export function StatusBadge({ status }: { status: OrderStatus }) {
+  return (
+    <span
+      className={`inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium border capitalize ${statusStyles[status]}`}
+    >
+      {status}
+    </span>
+  );
+}