48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { useParams } from '@tanstack/react-router';
|
|
|
|
function CollectionDetailsPage() {
|
|
const { name } = useParams();
|
|
const { data: collections, isLoading, isError } = useQuery(['collections'], fetchCollections);
|
|
|
|
if (isLoading) return <div>Loading collection...</div>;
|
|
if (isError) return <div>Failed to load collection. Please try again later.</div>;
|
|
|
|
const collection = collections?.find((col) => col.name === name);
|
|
|
|
if (!collection) return <div>Collection not found.</div>;
|
|
|
|
return (
|
|
<div className="space-y-6">
|
|
<h1 className="text-3xl font-bold">{collection.name}</h1>
|
|
<p className="text-muted-foreground">{collection.description}</p>
|
|
|
|
<div className="space-y-4">
|
|
<h2 className="text-2xl font-semibold">Articles</h2>
|
|
<div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3">
|
|
{collection.articles.map((article) => (
|
|
<div key={article.id} className="border p-4 rounded-lg">
|
|
<h3 className="text-xl font-semibold">{article.title}</h3>
|
|
<p className="text-sm text-muted-foreground">
|
|
{article.content.substring(0, 100)}...
|
|
</p>
|
|
<a href={article.url} target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:underline">
|
|
Read more
|
|
</a>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default CollectionDetailsPage;import { createFileRoute } from '@tanstack/react-router'
|
|
|
|
export const Route = createFileRoute('/collections/[name]')({
|
|
component: RouteComponent,
|
|
})
|
|
|
|
function RouteComponent() {
|
|
return <div>Hello "/collections/[name]"!</div>
|
|
}
|