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

Add some css animation to make the project prettier #7

Merged
matthieu merged 7 commits from feature/issue-6-add-some-css-animation-to-make-the-project-prettie into master 2025-10-23 16:43:10 +02:00
Conversation 0 Commits 7 Files Changed 7 +90 -90
1 changed files with 90 additions and 90 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit c3cc4e59f6 - Show all commits

180
src/App.tsx
View File

@@ -1,91 +1,91 @@
import React, { useState } from 'react'; import React, { useState } from 'react';
import DeckManager from './components/DeckManager'; import DeckManager from './components/DeckManager';
import DeckList from './components/DeckList'; import DeckList from './components/DeckList';
import LoginForm from './components/LoginForm'; import LoginForm from './components/LoginForm';
import Navigation from './components/Navigation'; import Navigation from './components/Navigation';
import Collection from './components/Collection'; import Collection from './components/Collection';
import DeckEditor from './components/DeckEditor'; import DeckEditor from './components/DeckEditor';
import Profile from './components/Profile'; import Profile from './components/Profile';
import CardSearch from './components/CardSearch'; import CardSearch from './components/CardSearch';
import LifeCounter from './components/LifeCounter'; import LifeCounter from './components/LifeCounter';
import { AuthProvider, useAuth } from './contexts/AuthContext'; import { AuthProvider, useAuth } from './contexts/AuthContext';
type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'profile' | 'search' | 'life-counter'; type Page = 'home' | 'deck' | 'login' | 'collection' | 'edit-deck' | 'profile' | 'search' | 'life-counter';
function AppContent() { function AppContent() {
const [currentPage, setCurrentPage] = useState<Page>('home'); const [currentPage, setCurrentPage] = useState<Page>('home');
const [selectedDeckId, setSelectedDeckId] = useState<string | null>(null); const [selectedDeckId, setSelectedDeckId] = useState<string | null>(null);
const { user, loading } = useAuth(); const { user, loading } = useAuth();
if (loading) { if (loading) {
return ( return (
<div className="min-h-screen bg-gray-900 flex items-center justify-center"> <div className="min-h-screen bg-gray-900 flex items-center justify-center">
<div className="animate-spin rounded-full h-32 w-32 border-t-2 border-b-2 border-blue-500"></div> <div className="loading-spinner h-32 w-32"></div>
</div> </div>
); );
} }
if (!user && currentPage !== 'login') { if (!user && currentPage !== 'login') {
return <LoginForm />; return <LoginForm />;
} }
const handleDeckEdit = (deckId: string) => { const handleDeckEdit = (deckId: string) => {
setSelectedDeckId(deckId); setSelectedDeckId(deckId);
setCurrentPage('edit-deck'); setCurrentPage('edit-deck');
}; };
const renderPage = () => { const renderPage = () => {
switch (currentPage) { switch (currentPage) {
case 'home': case 'home':
return ( return (
<div className="min-h-screen bg-gray-900 text-white p-6"> <div className="min-h-screen bg-gray-900 text-white p-6 animate-fade-in">
<div className="max-w-7xl mx-auto"> <div className="max-w-7xl mx-auto">
<h1 className="text-3xl font-bold mb-6">My Decks</h1> <h1 className="text-3xl font-bold mb-6 animate-slide-in-left">My Decks</h1>
<DeckList onDeckEdit={handleDeckEdit} /> <DeckList onDeckEdit={handleDeckEdit} />
</div> </div>
</div> </div>
); );
case 'deck': case 'deck':
return <DeckManager />; return <DeckManager />;
case 'edit-deck': case 'edit-deck':
return selectedDeckId ? ( return selectedDeckId ? (
<DeckEditor <DeckEditor
deckId={selectedDeckId} deckId={selectedDeckId}
onClose={() => { onClose={() => {
setSelectedDeckId(null); setSelectedDeckId(null);
setCurrentPage('home'); setCurrentPage('home');
}} }}
/> />
) : null; ) : null;
case 'collection': case 'collection':
return <Collection />; return <Collection />;
case 'profile': case 'profile':
return <Profile />; return <Profile />;
case 'search': case 'search':
return <CardSearch />; return <CardSearch />;
case 'life-counter': case 'life-counter':
return <LifeCounter />; return <LifeCounter />;
case 'login': case 'login':
return <LoginForm />; return <LoginForm />;
default: default:
return null; return null;
} }
}; };
return ( return (
<div className="min-h-screen bg-gray-900"> <div className="min-h-screen bg-gray-900">
<Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} /> <Navigation currentPage={currentPage} setCurrentPage={setCurrentPage} />
{renderPage()} {renderPage()}
</div> </div>
); );
} }
function App() { function App() {
return ( return (
<AuthProvider> <AuthProvider>
<AppContent /> <AppContent />
</AuthProvider> </AuthProvider>
); );
} }
export default App; export default App;