b2ea950a3c
Extract detail page state into useDeckDetail and layout into DeckDetailView; pages/deck/[id].js is a thin loading/not-found gated composer. Co-authored-by: Cursor <cursoragent@cursor.com>
50 lines
1.4 KiB
JavaScript
50 lines
1.4 KiB
JavaScript
import Link from 'next/link';
|
|
import Layout from '../../components/Layout';
|
|
import DeckDetailView from '../../components/DeckDetailView';
|
|
import { useAuth } from '../../lib/use-auth';
|
|
import { useDeckDetail } from '../../lib/use-deck-detail.js';
|
|
|
|
export default function DeckDetail() {
|
|
const { user, loading: authLoading } = useAuth();
|
|
const detail = useDeckDetail({ user, authLoading });
|
|
|
|
if (detail.showDeckLoading) {
|
|
return (
|
|
<Layout user={user}>
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div
|
|
className="animate-spin rounded-full h-32 w-32 border-b-2"
|
|
style={{ borderColor: 'var(--accent-ember)' }}
|
|
/>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
if (detail.showDeckNotFound) {
|
|
return (
|
|
<Layout user={user}>
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="text-center">
|
|
<h1 className="text-2xl font-bold mb-4" style={{ color: 'var(--text-primary)' }}>
|
|
Deck not found
|
|
</h1>
|
|
<Link
|
|
href="/decks"
|
|
className="hover:underline"
|
|
style={{ color: 'var(--accent-ember)' }}
|
|
>
|
|
Back to Decks
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Layout user={user}>
|
|
<DeckDetailView {...detail} />
|
|
</Layout>
|
|
);
|
|
}
|