Extract PublicCardsView from pages/cards.js (Brief 2). (#78)
Moves the anonymous /cards landing UI into components/PublicCardsView.js so the page file can focus on AuthenticatedCards. Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
varutasu
GitHub
parent
33e03d8f47
commit
84462417ee
2 changed files with 63 additions and 60 deletions
62
components/PublicCardsView.js
Normal file
62
components/PublicCardsView.js
Normal file
|
|
@ -0,0 +1,62 @@
|
||||||
|
import Link from 'next/link';
|
||||||
|
import Layout from './Layout';
|
||||||
|
import { VOCAB } from '../lib/collection-vocabulary.js';
|
||||||
|
|
||||||
|
export default function PublicCardsView() {
|
||||||
|
return (
|
||||||
|
<Layout user={null}>
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="max-w-7xl mx-auto">
|
||||||
|
{/* Header with login prompt */}
|
||||||
|
<div className="mb-8 text-center">
|
||||||
|
<h1 className="text-4xl font-bold mb-4 gradient-text-flame">Browse Trading Cards</h1>
|
||||||
|
<p className="text-xl mb-6" style={{ color: 'var(--text-secondary)' }}>
|
||||||
|
Discover thousands of trading cards from popular TCGs
|
||||||
|
</p>
|
||||||
|
<div className="bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 rounded-2xl p-6 border border-orange-200 dark:border-orange-800">
|
||||||
|
<h3 className="text-lg font-semibold mb-2 gradient-text-ember">Sign Up to Unlock Full Features</h3>
|
||||||
|
<p className="mb-4" style={{ color: 'var(--text-secondary)' }}>
|
||||||
|
Create lists, add cards to {VOCAB.MY_COLLECTION}, mark favorites, and more!
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
||||||
|
<Link
|
||||||
|
href="/signup"
|
||||||
|
className="px-6 py-3 font-medium rounded-xl transition-all duration-200 hover:opacity-90"
|
||||||
|
style={{
|
||||||
|
backgroundColor: 'var(--accent-ember)',
|
||||||
|
color: 'white'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Create Free Account
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/login"
|
||||||
|
className="px-6 py-3 font-medium rounded-xl border-2 transition-all duration-200 hover:opacity-80"
|
||||||
|
style={{
|
||||||
|
color: 'var(--text-primary)',
|
||||||
|
borderColor: 'var(--accent-ember)'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Sign In
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Basic card browser would go here - simplified version */}
|
||||||
|
<div className="text-center py-20">
|
||||||
|
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl flex items-center justify-center" style={{ backgroundColor: 'var(--accent-ember)' }}>
|
||||||
|
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||||
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<h3 className="text-xl font-semibold mb-2 gradient-text-flame">Full Card Browser Coming Soon</h3>
|
||||||
|
<p style={{ color: 'var(--text-secondary)' }}>
|
||||||
|
Sign up now to get early access to our complete card database and list tools.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layout>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
|
||||||
import Link from 'next/link';
|
import Link from 'next/link';
|
||||||
import Layout from '../components/Layout';
|
import Layout from '../components/Layout';
|
||||||
import CardItem from '../components/CardItem';
|
import CardItem from '../components/CardItem';
|
||||||
|
import PublicCardsView from '../components/PublicCardsView';
|
||||||
import BulkSelectionToolbar from '../components/BulkSelectionToolbar';
|
import BulkSelectionToolbar from '../components/BulkSelectionToolbar';
|
||||||
import CollectionSelectionModal from '../components/CollectionSelectionModal';
|
import CollectionSelectionModal from '../components/CollectionSelectionModal';
|
||||||
import ProtectedRoute from '../components/ProtectedRoute';
|
import ProtectedRoute from '../components/ProtectedRoute';
|
||||||
|
|
@ -11,66 +12,6 @@ import ManaSymbolSettings from '../components/ManaSymbolSettings';
|
||||||
import { useAuth } from '../lib/use-auth';
|
import { useAuth } from '../lib/use-auth';
|
||||||
import { VOCAB } from '../lib/collection-vocabulary.js';
|
import { VOCAB } from '../lib/collection-vocabulary.js';
|
||||||
|
|
||||||
// Public fallback component for non-authenticated users
|
|
||||||
function PublicCardsView() {
|
|
||||||
return (
|
|
||||||
<Layout user={null}>
|
|
||||||
<div className="p-6">
|
|
||||||
<div className="max-w-7xl mx-auto">
|
|
||||||
{/* Header with login prompt */}
|
|
||||||
<div className="mb-8 text-center">
|
|
||||||
<h1 className="text-4xl font-bold mb-4 gradient-text-flame">Browse Trading Cards</h1>
|
|
||||||
<p className="text-xl mb-6" style={{ color: 'var(--text-secondary)' }}>
|
|
||||||
Discover thousands of trading cards from popular TCGs
|
|
||||||
</p>
|
|
||||||
<div className="bg-gradient-to-r from-orange-50 to-red-50 dark:from-orange-900/20 dark:to-red-900/20 rounded-2xl p-6 border border-orange-200 dark:border-orange-800">
|
|
||||||
<h3 className="text-lg font-semibold mb-2 gradient-text-ember">Sign Up to Unlock Full Features</h3>
|
|
||||||
<p className="mb-4" style={{ color: 'var(--text-secondary)' }}>
|
|
||||||
Create lists, add cards to {VOCAB.MY_COLLECTION}, mark favorites, and more!
|
|
||||||
</p>
|
|
||||||
<div className="flex flex-col sm:flex-row gap-3 justify-center">
|
|
||||||
<Link
|
|
||||||
href="/signup"
|
|
||||||
className="px-6 py-3 font-medium rounded-xl transition-all duration-200 hover:opacity-90"
|
|
||||||
style={{
|
|
||||||
backgroundColor: 'var(--accent-ember)',
|
|
||||||
color: 'white'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Create Free Account
|
|
||||||
</Link>
|
|
||||||
<Link
|
|
||||||
href="/login"
|
|
||||||
className="px-6 py-3 font-medium rounded-xl border-2 transition-all duration-200 hover:opacity-80"
|
|
||||||
style={{
|
|
||||||
color: 'var(--text-primary)',
|
|
||||||
borderColor: 'var(--accent-ember)'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Sign In
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Basic card browser would go here - simplified version */}
|
|
||||||
<div className="text-center py-20">
|
|
||||||
<div className="w-16 h-16 mx-auto mb-4 rounded-2xl flex items-center justify-center" style={{ backgroundColor: 'var(--accent-ember)' }}>
|
|
||||||
<svg className="w-8 h-8 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
||||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<h3 className="text-xl font-semibold mb-2 gradient-text-flame">Full Card Browser Coming Soon</h3>
|
|
||||||
<p style={{ color: 'var(--text-secondary)' }}>
|
|
||||||
Sign up now to get early access to our complete card database and list tools.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Layout>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function AuthenticatedCards() {
|
function AuthenticatedCards() {
|
||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const { user, loading: authLoading } = useAuth();
|
const { user, loading: authLoading } = useAuth();
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue