52 lines
1.7 KiB
JavaScript
52 lines
1.7 KiB
JavaScript
import { useRouter } from 'next/router';
|
|
import Layout from '../../components/Layout';
|
|
import CardDetailView from '../../components/CardDetailView';
|
|
import { useAuth } from '../../lib/use-auth';
|
|
import { useCardDetail } from '../../lib/use-card-detail.js';
|
|
|
|
export default function CardDetail() {
|
|
const router = useRouter();
|
|
const { user, loading: authLoading } = useAuth();
|
|
const detail = useCardDetail({ user, authLoading });
|
|
|
|
if (detail.loading) {
|
|
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(--text-accent-light)' }} />
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
if (!detail.card) {
|
|
return (
|
|
<Layout user={user}>
|
|
<div className="flex items-center justify-center min-h-screen">
|
|
<div className="text-center">
|
|
<div className="text-6xl mb-4">🃏</div>
|
|
<h2 className="text-xl font-bold mb-2" style={{ color: 'var(--text-primary)' }}>
|
|
Card Not Found
|
|
</h2>
|
|
<p className="mb-6" style={{ color: 'var(--text-secondary)' }}>
|
|
The card you're looking for doesn't exist.
|
|
</p>
|
|
<button
|
|
type="button"
|
|
onClick={() => router.push('/cards')}
|
|
className="px-6 py-3 rounded-xl font-medium gradient-bg-purple text-white hover:shadow-lg transition-all duration-200"
|
|
>
|
|
Back to Cards
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</Layout>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<Layout user={user}>
|
|
<CardDetailView {...detail} />
|
|
</Layout>
|
|
);
|
|
}
|