58 lines
1.7 KiB
TypeScript
58 lines
1.7 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { Search } from "lucide-react";
|
|
import { MapCard, type CardMap } from "./MapCard";
|
|
export function CatalogBrowser({ maps }: { maps: CardMap[] }) {
|
|
const [query, setQuery] = useState(""),
|
|
[source, setSource] = useState("all");
|
|
const shown = maps.filter(
|
|
(m) =>
|
|
(source === "all" || m.source === source) &&
|
|
(m.name + " " + m.description + " " + (m.server?.name ?? ""))
|
|
.toLowerCase()
|
|
.includes(query.trim().toLowerCase()),
|
|
);
|
|
return (
|
|
<>
|
|
<div className="catalog-controls">
|
|
<label className="search-field">
|
|
<Search size={17} />
|
|
<input
|
|
aria-label="Search worlds"
|
|
placeholder="Search worlds or servers…"
|
|
value={query}
|
|
onChange={(e) => setQuery(e.target.value)}
|
|
/>
|
|
</label>
|
|
<div className="tabs" aria-label="Capture source">
|
|
{[
|
|
["all", "All worlds"],
|
|
["plugin", "Server exports"],
|
|
["fabric", "Player captures"],
|
|
].map(([id, label]) => (
|
|
<button
|
|
key={id}
|
|
className={source === id ? "active" : ""}
|
|
aria-pressed={source === id}
|
|
onClick={() => setSource(id)}
|
|
>
|
|
{label}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<p className="muted">
|
|
{shown.length} {shown.length === 1 ? "world" : "worlds"} to explore
|
|
</p>
|
|
<div className="cards-grid">
|
|
{shown.map((m, i) => (
|
|
<MapCard map={m} index={i} key={m.id} />
|
|
))}
|
|
</div>
|
|
{!shown.length && (
|
|
<p className="empty-state">No worlds match that search.</p>
|
|
)}
|
|
</>
|
|
);
|
|
}
|