Initial commit from your app

2025-02-01 22:24:59 +01:00
parent 8eda5e8cfe
commit d4c44ece53
38 changed files with 9031 additions and 0 deletions
--- a/src/components/Collection.tsx
+++ b/src/components/Collection.tsx
@@ -0,0 +1,121 @@
+import React, { useState } from 'react';
+import { Search, Plus } from 'lucide-react';
+import { Card } from '../types';
+import { searchCards } from '../services/api';
+
+export default function Collection() {
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<Card[]>([]);
+  const [collection, setCollection] = useState<{ card: Card; quantity: number }[]>([]);
+
+  const handleSearch = async (e: React.FormEvent) => {
+    e.preventDefault();
+    if (!searchQuery.trim()) return;
+    
+    try {
+      const cards = await searchCards(searchQuery);
+      setSearchResults(cards);
+    } catch (error) {
+      console.error('Failed to search cards:', error);
+    }
+  };
+
+  const addToCollection = (card: Card) => {
+    setCollection(prev => {
+      const existing = prev.find(c => c.card.id === card.id);
+      if (existing) {
+        return prev.map(c => 
+          c.card.id === card.id 
+            ? { ...c, quantity: c.quantity + 1 }
+            : c
+        );
+      }
+      return [...prev, { card, quantity: 1 }];
+    });
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white p-6">
+      <div className="max-w-7xl mx-auto">
+        <h1 className="text-3xl font-bold mb-6">My Collection</h1>
+        
+        {/* Search */}
+        <form onSubmit={handleSearch} className="flex gap-2 mb-8">
+          <div className="relative flex-1">
+            <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" size={20} />
+            <input
+              type="text"
+              value={searchQuery}
+              onChange={(e) => setSearchQuery(e.target.value)}
+              className="w-full pl-10 pr-4 py-2 bg-gray-800 border border-gray-700 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+              placeholder="Search cards to add..."
+            />
+          </div>
+          <button
+            type="submit"
+            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center gap-2"
+          >
+            <Search size={20} />
+            Search
+          </button>
+        </form>
+
+        {/* Search Results */}
+        {searchResults.length > 0 && (
+          <div className="mb-8">
+            <h2 className="text-xl font-semibold mb-4">Search Results</h2>
+            <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+              {searchResults.map(card => (
+                <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden">
+                  {card.image_uris?.normal && (
+                    <img
+                      src={card.image_uris.normal}
+                      alt={card.name}
+                      className="w-full h-auto"
+                    />
+                  )}
+                  <div className="p-4">
+                    <h3 className="font-bold mb-2">{card.name}</h3>
+                    <button
+                      onClick={() => addToCollection(card)}
+                      className="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg flex items-center justify-center gap-2"
+                    >
+                      <Plus size={20} />
+                      Add to Collection
+                    </button>
+                  </div>
+                </div>
+              ))}
+            </div>
+          </div>
+        )}
+
+        {/* Collection */}
+        <div>
+          <h2 className="text-xl font-semibold mb-4">My Cards</h2>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4">
+            {collection.map(({ card, quantity }) => (
+              <div key={card.id} className="bg-gray-800 rounded-lg overflow-hidden">
+                {card.image_uris?.normal && (
+                  <img
+                    src={card.image_uris.normal}
+                    alt={card.name}
+                    className="w-full h-auto"
+                  />
+                )}
+                <div className="p-4">
+                  <div className="flex justify-between items-center mb-2">
+                    <h3 className="font-bold">{card.name}</h3>
+                    <span className="text-sm bg-blue-600 px-2 py-1 rounded">
+                      x{quantity}
+                    </span>
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}