Code refactoring

apps/frontend/src/features/complex/components/court-list-section.tsx

@@ -0,0 +1,85 @@
+import type { Court } from '@repo/api-contract'
+import { Button } from '@/components/ui/button'
+import { formatCurrency, summarizeAvailability } from '../lib/court.utils'
+
+type CourtListSectionProps = {
+  courts: Court[]
+  isLoading: boolean
+  isError: boolean
+  onDuplicateCourt: (court: Court) => void
+  onEditCourt: (court: Court) => void
+}
+
+export function CourtListSection({
+  courts,
+  isLoading,
+  isError,
+  onDuplicateCourt,
+  onEditCourt,
+}: CourtListSectionProps) {
+  return (
+    <section className="rounded-xl border bg-card p-4 text-card-foreground shadow-sm sm:p-5">
+      <h3 className="text-lg font-semibold">Canchas configuradas</h3>
+
+      {isLoading && <p className="mt-3 text-sm text-muted-foreground">Cargando canchas...</p>}
+
+      {isError && (
+        <p className="mt-3 text-sm text-destructive">
+          No se pudieron cargar las canchas del complejo.
+        </p>
+      )}
+
+      {!isLoading && courts.length === 0 && (
+        <p className="mt-3 text-sm text-muted-foreground">
+          Aún no hay canchas. Crea la primera usando el formulario.
+        </p>
+      )}
+
+      <div className="mt-4 space-y-3">
+        {courts.map((court) => (
+          <article key={court.id} className="rounded-lg border p-4">
+            <div className="flex flex-col gap-3 sm:flex-row sm:flex-wrap sm:items-center sm:justify-between">
+              <div>
+                <p className="font-medium">{court.name}</p>
+                <p className="text-sm text-muted-foreground">
+                  {court.sport.name} · {court.slotDurationMinutes} min ·{' '}
+                  {formatCurrency(court.basePrice)}
+                </p>
+              </div>
+              <div className="flex w-full flex-col gap-2 sm:w-auto sm:flex-row">
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full sm:w-auto"
+                  onClick={() => {
+                    onDuplicateCourt(court)
+                  }}
+                >
+                  Duplicar cancha
+                </Button>
+                <Button
+                  type="button"
+                  variant="outline"
+                  className="w-full sm:w-auto"
+                  onClick={() => {
+                    onEditCourt(court)
+                  }}
+                >
+                  Editar
+                </Button>
+              </div>
+            </div>
+
+            <div className="mt-3 flex flex-wrap gap-2 text-xs text-muted-foreground">
+              {summarizeAvailability(court.availability).map((summary) => (
+                <span key={`${court.id}-${summary}`} className="rounded-md border px-2 py-1">
+                  {summary}
+                </span>
+              ))}
+            </div>
+          </article>
+        ))}
+      </div>
+    </section>
+  )
+}