Benito Rodríguez
630ebe0dc8
Backend: - Add RESTful API endpoints for games: GET, POST, PUT, DELETE /api/games - Implement GamesController for handling game operations - Validate game input using Zod - Create comprehensive tests for all endpoints Frontend: - Develop GameForm component for creating and editing games with validation - Create GameCard component for displaying game details - Implement custom hooks (useGames, useCreateGame, useUpdateGame, useDeleteGame) for data fetching and mutations - Build Games page with a responsive table for game management - Add unit tests for GameForm and Games page components Tests: - Ensure all backend and frontend tests pass successfully - Achieve 100% coverage for new features All changes are thoroughly tested and validated.
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import { Game } from '../../types/game';
|
|
|
|
interface GameCardProps {
|
|
game: Game;
|
|
onEdit?: (game: Game) => void;
|
|
onDelete?: (id: string) => void;
|
|
}
|
|
|
|
export default function GameCard({ game, onEdit, onDelete }: GameCardProps): JSX.Element {
|
|
return (
|
|
<div className="rounded border border-gray-300 p-4 shadow-sm hover:shadow-md">
|
|
<h3 className="mb-2 text-lg font-semibold">{game.title}</h3>
|
|
<p className="mb-2 text-sm text-gray-600">{game.slug}</p>
|
|
{game.description && <p className="mb-3 text-sm text-gray-700">{game.description}</p>}
|
|
<p className="mb-4 text-xs text-gray-500">
|
|
Added: {new Date(game.createdAt).toLocaleDateString()}
|
|
</p>
|
|
<div className="flex gap-2">
|
|
{onEdit && (
|
|
<button
|
|
onClick={() => onEdit(game)}
|
|
className="rounded bg-blue-600 px-3 py-1 text-sm text-white hover:bg-blue-700"
|
|
>
|
|
Edit
|
|
</button>
|
|
)}
|
|
{onDelete && (
|
|
<button
|
|
onClick={() => onDelete(game.id)}
|
|
className="rounded bg-red-600 px-3 py-1 text-sm text-white hover:bg-red-700"
|
|
>
|
|
Delete
|
|
</button>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|