108 lines
3.5 KiB
TypeScript
108 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
import { SearchIcon, UsersIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
|
|
import {
|
|
Card,
|
|
CardAction,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { Badge } from "@/components/ui/badge";
|
|
import {
|
|
Empty,
|
|
EmptyDescription,
|
|
EmptyHeader,
|
|
EmptyTitle,
|
|
} from "@/components/ui/empty";
|
|
import {
|
|
InputGroup,
|
|
InputGroupAddon,
|
|
InputGroupInput,
|
|
} from "@/components/ui/input-group";
|
|
import { useVisitorPresence } from "@/hooks/use-presence";
|
|
|
|
type GuideCard = {
|
|
id: string;
|
|
slug: string;
|
|
name: string;
|
|
overview: string;
|
|
coverUrl: string;
|
|
version: number;
|
|
aliases: string[];
|
|
};
|
|
|
|
export function StructuredDirectory({ guides }: { guides: GuideCard[] }) {
|
|
const [query, setQuery] = useState("");
|
|
const presence = useVisitorPresence(null);
|
|
const normalized = query.trim().toLowerCase();
|
|
const filtered = guides.filter((guide) =>
|
|
`${guide.name} ${guide.overview} ${guide.aliases.join(" ")}`.toLowerCase().includes(normalized),
|
|
);
|
|
return (
|
|
<div className="flex flex-col gap-8">
|
|
<InputGroup className="h-11 max-w-2xl">
|
|
<InputGroupAddon>
|
|
<SearchIcon />
|
|
</InputGroupAddon>
|
|
<InputGroupInput
|
|
value={query}
|
|
onChange={(event) => setQuery(event.target.value)}
|
|
placeholder="ค้นหาไกด์…"
|
|
aria-label="ค้นหาไกด์"
|
|
/>
|
|
</InputGroup>
|
|
{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 overflow-hidden py-0 transition-transform group-hover:-translate-y-0.5">
|
|
<div className="relative aspect-square bg-muted">
|
|
<Image
|
|
src={guide.coverUrl}
|
|
alt={`ไกด์ ${guide.name}`}
|
|
fill
|
|
fetchPriority={index === 0 ? "high" : undefined}
|
|
sizes="(min-width: 1024px) 33vw, (min-width: 640px) 50vw, 100vw"
|
|
className="object-cover"
|
|
/>
|
|
</div>
|
|
<CardHeader className="pt-5">
|
|
<CardTitle>{guide.name}</CardTitle>
|
|
<CardAction
|
|
className={(presence?.byGuide[guide.id] ?? 0) > 0 ? undefined : "invisible"}
|
|
>
|
|
<Badge variant="secondary" className="min-w-14 tabular-nums">
|
|
<UsersIcon data-icon="inline-start" />
|
|
{presence?.byGuide[guide.id] ?? 0} คน
|
|
</Badge>
|
|
</CardAction>
|
|
<CardDescription className="line-clamp-3">
|
|
{guide.overview}
|
|
</CardDescription>
|
|
</CardHeader>
|
|
</Card>
|
|
</Link>
|
|
))}
|
|
</div>
|
|
) : (
|
|
<Empty className="border">
|
|
<EmptyHeader>
|
|
<EmptyTitle>ไม่พบไกด์</EmptyTitle>
|
|
<EmptyDescription>ลองค้นหาด้วยชื่อตัวละครอื่น</EmptyDescription>
|
|
</EmptyHeader>
|
|
</Empty>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|