Ceratic/project_vollidioten_website
1
0
Fork 0
mirror of https://github.com/ceratic/project_vollidioten_website.git synced 2026-05-14 00:16:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: implement Players component with data fetching and loading state; remove mock data and enhance error handling in database service

Browse Source
This commit is contained in:
Lars Behrends
2025-12-30 15:58:07 +01:00
parent c6ad8a92ec
commit ea2b803534
12 changed files with 184 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
App.tsx
View File

@@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react';
import { Routes, Route, useNavigate, useLocation } from 'react-router-dom';
import Layout from './components/Layout';
import Dashboard from './pages/Dashboard';
import Players from './pages/Players';
import PlayerProfile from './pages/PlayerProfile';
import SetupGuide from './pages/SetupGuide';
import Projects from './pages/Projects';
@@ -109,42 +110,7 @@ function App() {
<Route path="/datapack" element={<DatapackGenerator />} />
{/* Player Routes */}
<Route path="/players" element={
<div className="animate-in fade-in">
<div className="flex justify-between items-center mb-6">
<h2 className="text-2xl font-bold">Bürgerverzeichnis</h2>
<div className="relative">
<input
type="text"
placeholder="Filtern nach Tag oder Name..."
className="bg-surfaceHighlight border border-border rounded-lg pl-10 pr-4 py-2 text-sm text-textMain focus:border-accentInfo focus:outline-none w-64 transition-colors"
/>
</div>
</div>
<div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
{players.map(player => (
<div
key={player.uuid}
onClick={() => navigateToPlayer(player.uuid)}
className="group bg-surface border border-border p-4 rounded-xl cursor-pointer hover:border-accentInfo/50 transition-all duration-200 hover:shadow-card"
>
<div className="flex items-center gap-4">
<div className="w-12 h-12 rounded-md flex items-center justify-center font-bold text-lg text-textMuted group-hover:text-textMain transition-colors">
<img src={"https://minotar.net/armor/bust/"+player.username+"/500.png"}></img>
</div>
<div>
<div className="font-semibold text-textMain group-hover:text-accentInfo transition-colors">{player.username}</div>
<div className="text-xs text-textMuted mt-1 flex gap-2">
{player.tags.slice(0, 2).map(t => <span key={t}>{t}</span>)}
</div>
</div>
</div>
</div>
))}
</div>
</div>
} />
<Route path="/players" element={<Players onSelectPlayer={navigateToPlayer} />} />
<Route path="/players/:id" element={<PlayerProfile />} />
{/* City Routes */}