6b81ed38b0
✨ Features: - Camera OCR card scanning with Tesseract.js - Beautiful glowing card effects and animations - Intelligent card matching and recognition - Mobile-responsive design with Tailwind CSS 🏗️ Architecture: - Frontend: React TypeScript application - Backend: Vercel Functions (replacing FastAPI) - Database: JSON file with exported card data - Deployment: Single Vercel project 📁 Structure: - api/ - Vercel Functions backend endpoints - src/ - React frontend components and logic - src/data/cards.json - Card database (12 cards) - vercel.json - Optimized Vercel configuration 💰 Cost: /bin/zsh additional (uses existing Vercel Pro) 🚀 Ready for immediate Vercel deployment
36 lines
No EOL
1.2 KiB
TypeScript
36 lines
No EOL
1.2 KiB
TypeScript
import React from 'react';
|
|
|
|
const Collections: React.FC = () => {
|
|
return (
|
|
<div>
|
|
<div className="flex justify-between items-center mb-8">
|
|
<div>
|
|
<h1 className="text-3xl font-bold text-gray-900">Collections</h1>
|
|
<p className="text-gray-600 mt-2">
|
|
Organize and manage your trading card collections
|
|
</p>
|
|
</div>
|
|
<button className="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-md font-medium transition-colors">
|
|
New Collection
|
|
</button>
|
|
</div>
|
|
|
|
<div className="bg-white rounded-lg shadow border border-gray-200 p-8">
|
|
<div className="text-center">
|
|
<span className="text-6xl mb-4 block">📚</span>
|
|
<h3 className="text-xl font-semibold text-gray-900 mb-2">
|
|
No collections yet
|
|
</h3>
|
|
<p className="text-gray-600 mb-6">
|
|
Create your first collection to start organizing your cards
|
|
</p>
|
|
<button className="bg-primary-600 hover:bg-primary-700 text-white px-6 py-3 rounded-md font-medium transition-colors">
|
|
Create Collection
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Collections;
|