matthieu/deckerr
1
0
Fork 0
Code Issues 2 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add functionality to create new decks and update navigation labels

Browse Source
This commit is contained in:
Matthieu
2025-11-21 17:36:00 +01:00
parent e062a3a84f
commit defcf2af9c
4 changed files with 73 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/App.tsx
View File

@@ -42,7 +42,10 @@ import React, { useState } from 'react';
<div className="bg-gray-900 text-white p-3 sm:p-6 animate-fade-in">
<div className="max-w-7xl mx-auto">
<h1 className="text-2xl md:text-3xl font-bold mb-4 md:mb-6 animate-slide-in-left">My Decks</h1>
<DeckList onDeckEdit={handleDeckEdit} />
<DeckList
onDeckEdit={handleDeckEdit}
onCreateDeck={() => setCurrentPage('deck')}
/>
</div>
</div>
);

20
src/components/DeckList.tsx
View File

@@ -3,12 +3,14 @@ import { getCardById, getCardsByIds } from '../services/api';
import { Deck } from '../types';
import { supabase } from "../lib/supabase";
import DeckCard from "./DeckCard";
import { PlusCircle } from 'lucide-react';
interface DeckListProps {
onDeckEdit?: (deckId: string) => void;
onCreateDeck?: () => void;
}
const DeckList = ({ onDeckEdit }: DeckListProps) => {
const DeckList = ({ onDeckEdit, onCreateDeck }: DeckListProps) => {
const [decks, setDecks] = useState<Deck[]>([]);
const [loading, setLoading] = useState(true);
@@ -92,6 +94,22 @@ const DeckList = ({ onDeckEdit }: DeckListProps) => {
{decks.map((deck) => (
<DeckCard key={deck.id} deck={deck} onEdit={onDeckEdit} />
))}
{/* Create New Deck Card */}
<button
onClick={onCreateDeck}
className="bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-2xl border-2 border-dashed border-gray-600 hover:border-blue-500 transition-all duration-300 hover:scale-105 cursor-pointer group min-h-[300px] flex flex-col items-center justify-center gap-4 p-8"
>
<PlusCircle size={64} className="text-gray-600 group-hover:text-blue-500 transition-colors" />
<div className="text-center">
<h3 className="text-xl font-bold text-gray-400 group-hover:text-blue-400 transition-colors">
Create New Deck
</h3>
<p className="text-sm text-gray-500 mt-2">
Start building your collection
</p>
</div>
</button>
</div>
);
};

2
src/components/DeckManager.tsx
View File

@@ -490,7 +490,7 @@ export default function DeckManager({ initialDeck, onSave }: DeckManagerProps) {
};
return (
<div className="bg-gray-900 text-white p-3 sm:p-6">
<div className="bg-gray-900 text-white p-3 sm:p-6 pt-6 pb-20 md:pt-20 md:pb-6">
<div className="max-w-7xl mx-auto">
<div className="grid grid-cols-1 lg:grid-cols-3 gap-4 sm:gap-6">
{/* Card Search Section */}

68
src/components/Navigation.tsx
View File

@@ -51,8 +51,7 @@ import React, { useState, useRef, useEffect } from 'react';
}, []);
const navItems = [
{ id: 'home' as const, label: 'Home', icon: Home },
{ id: 'deck' as const, label: 'New Deck', icon: PlusSquare },
{ id: 'home' as const, label: 'Decks', icon: Library },
{ id: 'collection' as const, label: 'Collection', icon: Library },
{ id: 'search' as const, label: 'Search', icon: Search },
{ id: 'life-counter' as const, label: 'Life Counter', icon: Heart },
@@ -140,52 +139,59 @@ import React, { useState, useRef, useEffect } from 'react';
</nav>
{/* Mobile Navigation - Bottom */}
<nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50 animate-slide-in-right">
<div className="flex justify-between items-center h-16 px-4">
<span className="text-2xl font-bold text-orange-500 animate-bounce-in">Deckerr</span>
<div className="relative" ref={mobileMenuRef}>
<button
onClick={() => setShowMobileMenu(!showMobileMenu)}
className="text-gray-300 hover:text-white"
>
<Menu size={24} />
</button>
{showMobileMenu && (
<div className="absolute right-0 bottom-16 w-48 bg-gray-800 rounded-md shadow-lg py-1 border border-gray-700 animate-scale-in glass-effect">
<nav className="md:hidden fixed bottom-0 left-0 right-0 bg-gray-800 border-t border-gray-700 z-50 safe-area-bottom">
<div className="flex justify-around items-center h-16 px-2">
{navItems.map((item) => (
<button
key={item.id}
onClick={() => {
setCurrentPage(item.id);
setShowMobileMenu(false);
}}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
onClick={() => setCurrentPage(item.id)}
className={`flex flex-col items-center justify-center flex-1 h-full transition-colors ${
currentPage === item.id
? 'text-blue-500'
: 'text-gray-400 hover:text-gray-200'
}`}
>
<item.icon size={16} />
<span>{item.label}</span>
<item.icon size={20} />
<span className="text-xs mt-1">{item.label}</span>
</button>
))}
{user && (
<>
{/* Settings with dropdown */}
<div className="relative flex-1 h-full" ref={mobileMenuRef}>
<button
onClick={() => setShowMobileMenu(!showMobileMenu)}
className={`flex flex-col items-center justify-center w-full h-full transition-colors ${
currentPage === 'profile' || showMobileMenu
? 'text-blue-500'
: 'text-gray-400 hover:text-gray-200'
}`}
>
<Settings size={20} />
<span className="text-xs mt-1">Settings</span>
</button>
{showMobileMenu && (
<div className="absolute right-0 bottom-full mb-2 w-48 bg-gray-800 rounded-lg shadow-xl py-1 border border-gray-700 animate-scale-in">
<button
onClick={() => {
setCurrentPage('profile');
setShowMobileMenu(false);
}}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
className="flex items-center space-x-3 w-full px-4 py-3 text-sm text-gray-300 hover:bg-gray-700 transition-colors"
>
<Settings size={16} />
<span>Profile Settings</span>
<Settings size={18} />
<span>Profile</span>
</button>
<button
onClick={handleSignOut}
className="flex items-center space-x-2 w-full px-4 py-2 text-sm text-gray-300 hover:bg-gray-700 transition-smooth"
onClick={() => {
handleSignOut();
setShowMobileMenu(false);
}}
className="flex items-center space-x-3 w-full px-4 py-3 text-sm text-red-400 hover:bg-gray-700 transition-colors"
>
<LogOut size={16} />
<LogOut size={18} />
<span>Sign Out</span>
</button>
</>
)}
</div>
)}
</div>