60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
|
import { useActionQuery } from "@agent-native/core/client/hooks";
|
||
|
|
import { IconHeart } from "@tabler/icons-react";
|
||
|
|
|
||
|
|
import { QuoteCard } from "@/components/quotes/QuoteCard";
|
||
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
||
|
|
import { useVisitorId } from "@/lib/visitor-id";
|
||
|
|
|
||
|
|
export function meta() {
|
||
|
|
return [{ title: "Favorites — Verse" }];
|
||
|
|
}
|
||
|
|
|
||
|
|
export function HydrateFallback() {
|
||
|
|
return (
|
||
|
|
<div className="flex items-center justify-center h-screen">
|
||
|
|
<div className="animate-spin rounded-full h-8 w-8 border-b-2 border-foreground" />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
export default function FavoritesRoute() {
|
||
|
|
const visitorId = useVisitorId();
|
||
|
|
const { data: quotes, isLoading } = useActionQuery(
|
||
|
|
"list-favorites",
|
||
|
|
{ visitorId },
|
||
|
|
{ enabled: Boolean(visitorId) },
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="mx-auto flex max-w-4xl flex-col gap-6 p-4 sm:p-6">
|
||
|
|
<div className="flex flex-col gap-1">
|
||
|
|
<h1 className="text-2xl font-semibold tracking-tight">Favorites</h1>
|
||
|
|
<p className="text-sm text-muted-foreground">
|
||
|
|
Quotes you've saved on this device.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{isLoading ? (
|
||
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
||
|
|
{Array.from({ length: 2 }).map((_, i) => (
|
||
|
|
<Skeleton key={i} className="h-48 w-full" />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
) : !quotes || quotes.length === 0 ? (
|
||
|
|
<div className="flex flex-col items-center gap-3 py-16 text-center text-muted-foreground">
|
||
|
|
<IconHeart className="size-8" />
|
||
|
|
<p className="text-sm">
|
||
|
|
No favorites yet — tap the heart on any quote to save it here.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="grid gap-4 sm:grid-cols-2">
|
||
|
|
{quotes.map((quote) => (
|
||
|
|
<QuoteCard key={quote.id} quote={quote} />
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|