rstillwell/deckhearth
1
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

refactor(cards): extract PublicCardsView (Brief 2) #78

Merged
varutasu merged 1 commit from refactor/cards-page-split-brief-2 into main 2026-06-03 13:06:25 -04:00
Conversation 3 Commits 1 Files changed 2 +63 -60
2 changed files with 63 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files
Showing only changes of commit d2b80be639 - Show all commits

62
components/PublicCardsView.js Normal file
View 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>
);
}

61
pages/cards.js
View file

@ -3,6 +3,7 @@ import { useRouter } from 'next/router';
import Link from 'next/link';
import Layout from '../components/Layout';
import CardItem from '../components/CardItem';
import PublicCardsView from '../components/PublicCardsView';
import BulkSelectionToolbar from '../components/BulkSelectionToolbar';
import CollectionSelectionModal from '../components/CollectionSelectionModal';
import ProtectedRoute from '../components/ProtectedRoute';
@ -11,66 +12,6 @@ import ManaSymbolSettings from '../components/ManaSymbolSettings';
import { useAuth } from '../lib/use-auth';
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() {
const router = useRouter();
const { user, loading: authLoading } = useAuth();