303 lines
14 KiB
TypeScript
303 lines
14 KiB
TypeScript
"use client";
|
|
|
|
import { searchItems } from "@/lib/search";
|
|
|
|
import Image from "@/components/ui/resilient-image";
|
|
import Link from "next/link";
|
|
import { useSearchParams } from "next/navigation";
|
|
import { SearchIcon, SlidersHorizontalIcon, StarIcon, UsersIcon, XIcon } from "lucide-react";
|
|
import { useEffect, useMemo, type ReactNode } from "react";
|
|
|
|
import { ElementIcon } from "@/components/public/element-icon";
|
|
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerHeader, DrawerTitle, DrawerTrigger } from "@/components/ui/drawer";
|
|
import {
|
|
Empty,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyTitle,
|
|
} from "@/components/ui/empty";
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupInput,
|
|
} from "@/components/ui/input-group";
|
|
import { useVisitorPresence } from "@/hooks/use-presence";
|
|
import { weaponTypeIconPath } from "@/lib/overview-image";
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectGroup,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from "@/components/ui/select";
|
|
import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
|
|
|
|
type GuideCard = {
|
|
id: string;
|
|
slug: string;
|
|
name: string;
|
|
overview: string;
|
|
coverUrl: string;
|
|
version: number;
|
|
aliases: string[];
|
|
element: string | null;
|
|
elementIconUrl: string | null;
|
|
weaponType: string | null;
|
|
rarity: number | null;
|
|
updatedAt: Date;
|
|
publishedAt: Date | null;
|
|
};
|
|
|
|
const elementLabels: Record<string, string> = {
|
|
Pyro: "ไฟ",
|
|
Hydro: "น้ำ",
|
|
Anemo: "ลม",
|
|
Electro: "ไฟฟ้า",
|
|
Dendro: "ไม้",
|
|
Cryo: "น้ำแข็ง",
|
|
Geo: "หิน",
|
|
};
|
|
|
|
const weaponTypeLabels: Record<string, string> = {
|
|
WEAPON_SWORD_ONE_HAND: "ดาบ",
|
|
WEAPON_CLAYMORE: "ดาบใหญ่",
|
|
WEAPON_POLE: "หอก",
|
|
WEAPON_BOW: "ธนู",
|
|
WEAPON_CATALYST: "สื่อเวท",
|
|
};
|
|
|
|
const sortOptions = [
|
|
{ value: "manual", label: "แนะนำ" },
|
|
{ value: "recent", label: "อัปเดตล่าสุด" },
|
|
{ value: "name-asc", label: "A - Z" },
|
|
{ value: "name-desc", label: "Z - A" },
|
|
] as const;
|
|
|
|
const SORT_STORAGE_KEY = "buzz-sheet:directory-sort";
|
|
|
|
export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
|
|
const searchParams = useSearchParams();
|
|
useEffect(() => {
|
|
if (searchParams.has("sort")) return;
|
|
try {
|
|
const savedSort = window.localStorage.getItem(SORT_STORAGE_KEY);
|
|
if (!savedSort || !sortOptions.some((option) => option.value === savedSort) || savedSort === "manual") return;
|
|
const next = new URLSearchParams(searchParams.toString());
|
|
next.set("sort", savedSort);
|
|
window.history.replaceState(null, "", `?${next.toString()}`);
|
|
} catch {
|
|
// Sorting still works when browser storage is unavailable.
|
|
}
|
|
}, [searchParams]);
|
|
const query = searchParams.get("q") ?? "";
|
|
const presence = useVisitorPresence(null);
|
|
const elements = useMemo(() => [...new Set(guides.flatMap((guide) => guide.element ? [guide.element] : []))].sort(), [guides]);
|
|
const weapons = useMemo(() => [...new Set(guides.flatMap((guide) => guide.weaponType ? [guide.weaponType] : []))].sort(), [guides]);
|
|
const rarities = useMemo(() => [...new Set(guides.flatMap((guide) => guide.rarity ? [guide.rarity] : []))].sort((a, b) => b - a), [guides]);
|
|
const elementIconUrls = useMemo(() => Object.fromEntries(guides.flatMap((guide) => guide.element && guide.elementIconUrl ? [[guide.element, guide.elementIconUrl]] : [])), [guides]);
|
|
const selectedElements = [...new Set((searchParams.get("element") ?? "").split(",").filter((value) => elements.includes(value)))];
|
|
const selectedWeapons = [...new Set((searchParams.get("weapon") ?? "").split(",").filter((value) => weapons.includes(value)))];
|
|
const selectedRarities = [...new Set((searchParams.get("rarity") ?? "").split(",").filter((value) => rarities.includes(Number(value))))];
|
|
const sortParam = searchParams.get("sort");
|
|
const sort = sortParam === "recent" || sortParam === "name-asc" || sortParam === "name-desc" ? sortParam : "manual";
|
|
const matchingGuides = guides.filter((guide) =>
|
|
(!selectedElements.length || (guide.element !== null && selectedElements.includes(guide.element))) &&
|
|
(!selectedWeapons.length || (guide.weaponType !== null && selectedWeapons.includes(guide.weaponType))) &&
|
|
(!selectedRarities.length || (guide.rarity !== null && selectedRarities.includes(String(guide.rarity)))),
|
|
);
|
|
const search = searchItems(matchingGuides, query,
|
|
(guide) => `${guide.name} ${guide.overview} ${guide.aliases.join(" ")}`,
|
|
(guide) => [guide.name, ...guide.aliases]);
|
|
const filtered = sort === "recent"
|
|
? [...search.items].sort((left, right) =>
|
|
new Date(right.publishedAt ?? right.updatedAt).getTime() - new Date(left.publishedAt ?? left.updatedAt).getTime())
|
|
: sort === "name-asc" || sort === "name-desc"
|
|
? [...search.items].sort((left, right) => {
|
|
const order = left.name.localeCompare(right.name, "th", { numeric: true });
|
|
return sort === "name-asc" ? order : -order;
|
|
})
|
|
: search.items;
|
|
const activeFilters = [
|
|
...selectedElements.map((value) => ({ name: "element", value, label: elementLabels[value] ?? value })),
|
|
...selectedWeapons.map((value) => ({ name: "weapon", value, label: weaponTypeLabels[value] ?? value })),
|
|
...selectedRarities.map((value) => ({ name: "rarity", value, label: `${value} ดาว` })),
|
|
];
|
|
|
|
function setParam(name: string, value: string) {
|
|
if (name === "sort") {
|
|
try {
|
|
window.localStorage.setItem(SORT_STORAGE_KEY, value);
|
|
} catch {
|
|
// Keep the selection usable when browser storage is unavailable.
|
|
}
|
|
}
|
|
const next = new URLSearchParams(searchParams.toString());
|
|
if (!value || value === "all") next.delete(name);
|
|
else next.set(name, value);
|
|
const suffix = next.toString();
|
|
window.history.replaceState(null, "", suffix ? `?${suffix}` : window.location.pathname);
|
|
}
|
|
function clearParams(includeSearch = false) {
|
|
const next = new URLSearchParams(searchParams.toString());
|
|
for (const name of ["element", "weapon", "rarity", ...(includeSearch ? ["q"] : [])]) next.delete(name);
|
|
const suffix = next.toString();
|
|
window.history.replaceState(null, "", suffix ? `?${suffix}` : window.location.pathname);
|
|
}
|
|
function removeFilter(name: string, value: string) {
|
|
const values = name === "element" ? selectedElements : name === "weapon" ? selectedWeapons : selectedRarities;
|
|
setParam(name, values.filter((item) => item !== value).join(","));
|
|
}
|
|
const filterControls = (mobile: boolean) => <>
|
|
<GuideToggleFilter label="ธาตุ" value={selectedElements} options={elements} optionLabels={elementLabels} showLabels={mobile} optionIcon={(option) => elementIconUrls[option] ? <ElementIcon element={option} url={elementIconUrls[option]} /> : null} onChange={(values) => setParam("element", values.join(","))} />
|
|
<GuideToggleFilter label="อาวุธ" value={selectedWeapons} options={weapons} optionLabels={weaponTypeLabels} showLabels={mobile} optionIcon={(option) => {
|
|
const src = weaponTypeIconPath(option);
|
|
return src ? <Image src={src} alt="" width={16} height={16} className="size-4 object-contain" /> : null;
|
|
}} onChange={(values) => setParam("weapon", values.join(","))} />
|
|
<GuideToggleFilter label="ดาว" value={selectedRarities} options={rarities.map(String)} showLabels={mobile} optionIcon={() => <StarIcon className="size-4 fill-current text-yellow-500" />} optionText={(option) => option} onChange={(values) => setParam("rarity", values.join(","))} />
|
|
</>;
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
<div className="flex flex-col gap-2">
|
|
<div className="flex items-center gap-2">
|
|
<InputGroup className="min-h-11 sm:min-h-9 min-w-0 flex-1 sm:w-96 sm:flex-none">
|
|
<InputGroupAddon>
|
|
<SearchIcon />
|
|
</InputGroupAddon>
|
|
<InputGroupInput
|
|
value={query}
|
|
onChange={(event) => setParam("q", event.target.value)}
|
|
placeholder="ค้นหาชื่อตัวละคร…"
|
|
aria-label="ค้นหาไกด์"
|
|
/>
|
|
</InputGroup>
|
|
<Select value={sort} onValueChange={(next) => next && setParam("sort", next)}>
|
|
<SelectTrigger aria-label="เรียงตาม" className="min-h-11 w-32 sm:min-h-0 sm:w-auto"><SelectValue>{sortOptions.find((option) => option.value === sort)?.label}</SelectValue></SelectTrigger>
|
|
<SelectContent>
|
|
<SelectGroup>
|
|
{sortOptions.map((option) => <SelectItem key={option.value} value={option.value}>{option.label}</SelectItem>)}
|
|
</SelectGroup>
|
|
</SelectContent>
|
|
</Select>
|
|
</div>
|
|
<div className="sm:hidden">
|
|
<Drawer>
|
|
<DrawerTrigger render={<Button variant="outline" className="w-full" />}>
|
|
<SlidersHorizontalIcon data-icon="inline-start" />ตัวกรอง{activeFilters.length ? ` (${activeFilters.length})` : ""}
|
|
</DrawerTrigger>
|
|
<DrawerContent>
|
|
<DrawerHeader><DrawerTitle>ตัวกรองไกด์</DrawerTitle><DrawerDescription>เลือกธาตุ อาวุธ หรือจำนวนดาว</DrawerDescription></DrawerHeader>
|
|
<div className="flex max-h-[60svh] flex-col gap-5 overflow-y-auto px-4 pb-4">{filterControls(true)}</div>
|
|
<div className="flex gap-2 border-t p-4">
|
|
<Button variant="outline" disabled={!activeFilters.length} onClick={() => clearParams()}>ล้างตัวกรอง</Button>
|
|
<DrawerClose render={<Button className="flex-1" />}>ดู {filtered.length} ไกด์</DrawerClose>
|
|
</div>
|
|
</DrawerContent>
|
|
</Drawer>
|
|
</div>
|
|
<div className="hidden min-w-0 flex-wrap items-start gap-5 pb-1 sm:flex" aria-label="ตัวกรองไกด์">{filterControls(true)}</div>
|
|
<div className="flex flex-wrap items-center gap-2 text-sm text-muted-foreground" aria-live="polite">
|
|
<span>พบ {filtered.length} ไกด์</span>
|
|
{activeFilters.map((filter) => <Button key={`${filter.name}-${filter.value}`} variant="secondary" size="xs"
|
|
onClick={() => removeFilter(filter.name, filter.value)} aria-label={`ลบตัวกรอง ${filter.label}`}>
|
|
{filter.label}<XIcon data-icon="inline-end" />
|
|
</Button>)}
|
|
{activeFilters.length ? <Button variant="link" size="sm" onClick={() => clearParams()}>ล้างตัวกรอง</Button> : null}
|
|
</div>
|
|
</div>
|
|
|
|
{filtered.length ? (
|
|
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3">
|
|
{filtered.map((guide, index) => (
|
|
<Link
|
|
key={guide.id}
|
|
href={`/${guide.slug}`}
|
|
prefetch={false}
|
|
className="group rounded-xl outline-none focus-visible:ring-2 focus-visible:ring-ring"
|
|
>
|
|
<Card className="h-full flex-row gap-0 overflow-hidden py-0 transition-transform group-hover:-translate-y-0.5 sm:flex-col sm:gap-4">
|
|
<div className="relative size-24 shrink-0 bg-muted sm:aspect-square sm:size-auto">
|
|
<Image
|
|
src={guide.coverUrl}
|
|
alt={`ไกด์ ${guide.name}`}
|
|
fill
|
|
fetchPriority={index === 0 ? "high" : undefined}
|
|
sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 96px"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<CardHeader className="min-w-0 flex-1 p-3 sm:p-4 sm:pt-5">
|
|
<div className="min-w-0 space-y-1">
|
|
<CardTitle className="line-clamp-1">{guide.name}</CardTitle>
|
|
<CardDescription className="line-clamp-2 sm:line-clamp-3">
|
|
{guide.overview}
|
|
</CardDescription>
|
|
</div>
|
|
<CardAction
|
|
className={(presence?.byGuide[guide.id] ?? 0) > 0 ? "hidden sm:block" : "hidden sm:block sm:invisible"}
|
|
>
|
|
<Badge variant="secondary" className="min-w-14 tabular-nums">
|
|
<UsersIcon data-icon="inline-start" />
|
|
{presence?.byGuide[guide.id] ?? 0} คน
|
|
</Badge>
|
|
</CardAction>
|
|
</CardHeader>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Empty className="border">
|
|
<EmptyHeader>
|
|
<EmptyTitle>ไม่พบไกด์</EmptyTitle>
|
|
<EmptyDescription>ลองค้นหาด้วยชื่อตัวละครอื่น หรือล้างตัวกรอง</EmptyDescription>
|
|
</EmptyHeader>
|
|
<Button variant="outline" onClick={() => clearParams(true)}>ล้างการค้นหาและตัวกรอง</Button>
|
|
</Empty>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function GuideToggleFilter({
|
|
label,
|
|
value,
|
|
options,
|
|
optionLabels = {},
|
|
optionIcon,
|
|
optionText,
|
|
showLabels = false,
|
|
onChange,
|
|
}: {
|
|
label: string;
|
|
value: string[];
|
|
options: string[];
|
|
optionLabels?: Record<string, string>;
|
|
optionIcon?: (value: string) => ReactNode;
|
|
optionText?: (value: string) => string;
|
|
showLabels?: boolean;
|
|
onChange: (value: string[]) => void;
|
|
}) {
|
|
return (
|
|
<div className={showLabels ? "flex flex-col gap-2" : "shrink-0 border-l pl-2"}>
|
|
<ToggleGroup aria-label={label} variant="outline" size="sm" multiple value={value} onValueChange={onChange} className={showLabels ? "flex flex-wrap justify-start" : undefined}>
|
|
{options.map((option) => (
|
|
<ToggleGroupItem key={option} value={option} aria-label={`${label}: ${optionLabels[option] ?? option}`} title={`${label}: ${optionLabels[option] ?? option}`} className="max-sm:min-h-11 aria-pressed:border-primary aria-pressed:bg-transparent aria-pressed:text-primary">
|
|
{optionIcon?.(option)}{showLabels ? optionLabels[option] ?? option : optionText?.(option)}
|
|
</ToggleGroupItem>
|
|
))}
|
|
</ToggleGroup>
|
|
</div>
|
|
);
|
|
}
|