New booking panel

apps/frontend/src/features/booking/components/booking-status-legend.tsx

@@ -0,0 +1,18 @@
+const items = [
+  { label: 'Libre', className: 'bg-primary' },
+  { label: 'Reservado', className: 'bg-reserved' },
+  { label: 'Mantenimiento', className: 'bg-maintenance' },
+];
+
+export function BookingStatusLegend() {
+  return (
+    <div className="flex flex-wrap items-center gap-5 text-sm text-muted-foreground">
+      {items.map((item) => (
+        <span key={item.label} className="inline-flex items-center gap-2">
+          <span className={`size-3 rounded-full ${item.className}`} />
+          {item.label}
+        </span>
+      ))}
+    </div>
+  );
+}