36 lines
1.2 KiB
TypeScript
36 lines
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;
|