| | | 1 | | import { Form, Link } from "react-router"; |
| | | 2 | | import { routes } from "~/constants/routes"; |
| | | 3 | | import type { LocationResponse } from "~/api/client"; |
| | | 4 | | |
| | 3 | 5 | | export function LocationsList({ locations }: { locations: LocationResponse[] }) { |
| | 3 | 6 | | if (locations.length === 0) { |
| | 1 | 7 | | return ( |
| | | 8 | | <div className="card-empty"> |
| | | 9 | | <p className="text-muted">No locations yet.</p> |
| | | 10 | | <Link to={routes.locations.new()} className="link-text" style={{ display: "inline-block", marginTop: 12 }}> |
| | | 11 | | Add your first location → |
| | | 12 | | </Link> |
| | | 13 | | </div> |
| | | 14 | | ); |
| | | 15 | | } |
| | | 16 | | |
| | 2 | 17 | | return ( |
| | | 18 | | <table className="console-table"> |
| | | 19 | | <thead> |
| | | 20 | | <tr> |
| | | 21 | | <th>Name</th> |
| | | 22 | | <th>Description</th> |
| | | 23 | | <th style={{ width: 1, whiteSpace: "nowrap" }}></th> |
| | | 24 | | </tr> |
| | | 25 | | </thead> |
| | | 26 | | <tbody> |
| | 2 | 27 | | {locations.map((loc) => ( |
| | 2 | 28 | | <tr key={loc.id}> |
| | | 29 | | <td> |
| | | 30 | | <span style={{ fontWeight: 500 }}>{loc.name ?? "Unnamed"}</span> |
| | | 31 | | </td> |
| | | 32 | | <td style={{ color: "var(--c-fg-3)", fontSize: 12 }}> |
| | | 33 | | {loc.description || "—"} |
| | | 34 | | </td> |
| | | 35 | | <td> |
| | | 36 | | <div style={{ display: "flex", alignItems: "center", gap: 6 }}> |
| | | 37 | | <Link to={routes.locations.rooms(loc.id!)} className="link-chip"> |
| | | 38 | | Rooms |
| | | 39 | | </Link> |
| | | 40 | | <Link to={routes.locations.edit(loc.id!)} className="link-chip"> |
| | | 41 | | Edit |
| | | 42 | | </Link> |
| | | 43 | | <Form |
| | | 44 | | method="post" |
| | 0 | 45 | | onSubmit={(e) => { |
| | 0 | 46 | | if (!confirm("Delete this location and all its rooms and items?")) e.preventDefault(); |
| | | 47 | | }} |
| | | 48 | | > |
| | | 49 | | <input type="hidden" name="_action" value="delete" /> |
| | | 50 | | <input type="hidden" name="id" value={loc.id} /> |
| | | 51 | | <button type="submit" className="link-chip" style={{ color: "var(--c-danger)", borderColor: "transpare |
| | | 52 | | Delete |
| | | 53 | | </button> |
| | | 54 | | </Form> |
| | | 55 | | </div> |
| | | 56 | | </td> |
| | | 57 | | </tr> |
| | | 58 | | ))} |
| | | 59 | | </tbody> |
| | | 60 | | </table> |
| | | 61 | | ); |
| | | 62 | | } |