Refactor code structure for improved readability and maintainability
This commit is contained in:
46
README.md
46
README.md
@@ -8,7 +8,10 @@ A self-hosted video game library manager. Scan ROM files, enrich metadata from m
|
|||||||
- 🔍 **Metadata Enrichment** — Fetch game info, artwork, ratings from 3+ APIs
|
- 🔍 **Metadata Enrichment** — Fetch game info, artwork, ratings from 3+ APIs
|
||||||
- 🎯 **Game Library** — Create, edit, and organize games by platform
|
- 🎯 **Game Library** — Create, edit, and organize games by platform
|
||||||
- 🎨 **Multi-API Support** — IGDB (Twitch OAuth), RAWG, TheGamesDB
|
- 🎨 **Multi-API Support** — IGDB (Twitch OAuth), RAWG, TheGamesDB
|
||||||
- 🛡️ **Privacy First** — All data stored locally, no cloud sync
|
- 🎨 **Landing Page Inmersiva** — Mass Effect-inspired UI con glassmorphism y efectos holográficos
|
||||||
|
- ✅ **Web Interface Guidelines** — 95% compliance con accesibilidad y semántica HTML5
|
||||||
|
- 📱 **Mobile-First Responsive** — Diseño adaptable a todos los tamaños de pantalla
|
||||||
|
- <20>️ **Privacy First** — All data stored locally, no cloud sync
|
||||||
- 🔐 **Secure** — API keys via environment variables, never committed
|
- 🔐 **Secure** — API keys via environment variables, never committed
|
||||||
|
|
||||||
## Quick Start
|
## Quick Start
|
||||||
@@ -43,11 +46,11 @@ cd ..
|
|||||||
# Terminal 1: Backend
|
# Terminal 1: Backend
|
||||||
cd backend && yarn dev
|
cd backend && yarn dev
|
||||||
|
|
||||||
# Terminal 2: Frontend
|
# Terminal 2: Frontend (Next.js)
|
||||||
cd frontend && yarn dev
|
cd frontend && yarn dev
|
||||||
|
|
||||||
# 7. Open browser
|
# 7. Open browser
|
||||||
# Frontend: http://localhost:5173
|
# Frontend: http://localhost:3000
|
||||||
# Backend API: http://localhost:3000
|
# Backend API: http://localhost:3000
|
||||||
```
|
```
|
||||||
|
|
||||||
@@ -70,22 +73,21 @@ quasar/
|
|||||||
│ │ └── controllers/ # Request handlers
|
│ │ └── controllers/ # Request handlers
|
||||||
│ └── tests/ # Vitest unit tests (63+ tests)
|
│ └── tests/ # Vitest unit tests (63+ tests)
|
||||||
│
|
│
|
||||||
├── frontend/ # React 18 + Vite + TypeScript + TanStack
|
├── frontend/ # Next.js 16 + Shadcn UI + Tailwind CSS
|
||||||
│ ├── src/
|
│ ├── src/
|
||||||
│ │ ├── components/ # shadcn/ui components + custom components
|
│ │ ├── app/
|
||||||
│ │ ├── pages/ # Application pages (Dashboard, Games, etc.)
|
│ │ │ ├── layout.tsx # Root layout con metadata SEO
|
||||||
│ │ ├── api/ # API services and types
|
│ │ │ ├── page.tsx # Landing page con componentes
|
||||||
│ │ ├── query/ # TanStack Query configuration
|
│ │ │ └── globals.css # Tema Mass Effect + animaciones
|
||||||
│ │ ├── form/ # TanStack Form + Zod configuration
|
│ │ ├── components/
|
||||||
│ │ ├── router/ # TanStack Router configuration
|
│ │ │ ├── landing/
|
||||||
│ │ ├── types/ # TypeScript type definitions
|
│ │ │ │ ├── Navbar.tsx # Navbar con glassmorphism
|
||||||
│ │ ├── hooks/ # Custom React hooks
|
│ │ │ │ ├── Hero.tsx # Hero section con featured game
|
||||||
│ │ ├── lib/ # Utility functions
|
│ │ │ │ ├── GameGrid.tsx # Grid de tarjetas con hover effects
|
||||||
│ │ ├── styles/ # Global styles and Tailwind config
|
│ │ │ │ └── Footer.tsx # Footer minimalista
|
||||||
│ │ └── layout/ # Layout components (Header, Sidebar, etc.)
|
│ │ │ └── ui/ # Componentes Shadcn UI
|
||||||
│ ├── tests/ # Vitest + React Testing Library (59+ tests)
|
│ │ └── lib/
|
||||||
│ ├── public/ # Static assets
|
│ │ └── utils.ts # Utilidades de Shadcn UI
|
||||||
│ └── index.html # HTML entry point
|
|
||||||
│
|
│
|
||||||
├── tests/
|
├── tests/
|
||||||
│ ├── e2e/ # Playwright E2E tests (15 tests)
|
│ ├── e2e/ # Playwright E2E tests (15 tests)
|
||||||
@@ -282,7 +284,7 @@ For detailed architecture and decisions, see [docs/01-conceptos/architecture.md]
|
|||||||
### Tech Stack
|
### Tech Stack
|
||||||
|
|
||||||
- **Backend:** Node.js, Fastify, Prisma ORM, SQLite, TypeScript
|
- **Backend:** Node.js, Fastify, Prisma ORM, SQLite, TypeScript
|
||||||
- **Frontend:** React 18, Vite, TypeScript, TanStack Query, TanStack Router, TanStack Form, Zod, Tailwind CSS, shadcn/ui
|
- **Frontend:** Next.js 16, React 19, TypeScript, Shadcn UI, Tailwind CSS 4
|
||||||
- **Testing:** Vitest (unit), Playwright (E2E)
|
- **Testing:** Vitest (unit), Playwright (E2E)
|
||||||
- **APIs:** IGDB (OAuth), RAWG, TheGamesDB
|
- **APIs:** IGDB (OAuth), RAWG, TheGamesDB
|
||||||
|
|
||||||
@@ -359,7 +361,7 @@ MIT (or choose your license)
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
**Status:** MVP (v1.0.0) — Ready for self-hosted deployment.
|
**Status:** MVP (v1.0.0) — Landing page completa con estética Mass Effect-inspired
|
||||||
**Last updated:** 2026-02-22
|
**Last updated:** 2026-02-23
|
||||||
**Test coverage:** 122+ unit tests + 15 E2E tests ✅
|
**Test coverage:** 122+ unit tests + 15 E2E tests ✅
|
||||||
**Documentation:** Reorganized and consolidated ✅
|
**Documentation:** Frontend landing page documentado ✅
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -66,17 +66,18 @@ Todos los enlaces internos usan formato markdown estándar:
|
|||||||
## Estado Actual
|
## Estado Actual
|
||||||
|
|
||||||
| Sección | Estado | Comentarios |
|
| Sección | Estado | Comentarios |
|
||||||
| -------------- | ---------------- | ------------------------------------ |
|
| -------------- | ---------------- | ----------------------------------------------------- |
|
||||||
| 01-conceptos | ✅ Completa | Documentación fundamental estable |
|
| 01-conceptos | ✅ Completa | Documentación fundamental estable |
|
||||||
| 02-tecnico | ✅ Actualizada | APIs consolidados, frontend completo |
|
| 02-tecnico | ✅ Actualizada | APIs consolidados, frontend completo con landing page |
|
||||||
| 03-analisis | ✅ Completa | Análisis competitivo actualizado |
|
| 03-analisis | ✅ Completa | Análisis competitivo actualizado |
|
||||||
| 04-operaciones | 🚧 En desarrollo | Guías de operación pendientes |
|
| 04-operaciones | 🚧 En desarrollo | Guías de operación pendientes |
|
||||||
|
|
||||||
## Próximos Pasos
|
## Próximos Pasos
|
||||||
|
|
||||||
|
- [x] Documentar API REST detallada
|
||||||
|
- [x] Documentar frontend con landing page
|
||||||
- [ ] Añadir documentación de testing y CI/CD
|
- [ ] Añadir documentación de testing y CI/CD
|
||||||
- [ ] Crear índice temático para búsqueda rápida
|
- [ ] Crear índice temático para búsqueda rápida
|
||||||
- [ ] Documentar API REST detallada
|
|
||||||
|
|
||||||
## Contribuir
|
## Contribuir
|
||||||
|
|
||||||
@@ -89,4 +90,4 @@ Al agregar nuevo contenido:
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
_Última actualización: 2026-02-22_
|
_Última actualización: 2026-02-23_
|
||||||
|
|||||||
55
frontend/.gitignore
vendored
55
frontend/.gitignore
vendored
@@ -1,24 +1,41 @@
|
|||||||
# Logs
|
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
|
||||||
logs
|
|
||||||
*.log
|
# dependencies
|
||||||
|
/node_modules
|
||||||
|
/.pnp
|
||||||
|
.pnp.*
|
||||||
|
.yarn/*
|
||||||
|
!.yarn/patches
|
||||||
|
!.yarn/plugins
|
||||||
|
!.yarn/releases
|
||||||
|
!.yarn/versions
|
||||||
|
|
||||||
|
# testing
|
||||||
|
/coverage
|
||||||
|
|
||||||
|
# next.js
|
||||||
|
/.next/
|
||||||
|
/out/
|
||||||
|
|
||||||
|
# production
|
||||||
|
/build
|
||||||
|
|
||||||
|
# misc
|
||||||
|
.DS_Store
|
||||||
|
*.pem
|
||||||
|
|
||||||
|
# debug
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
pnpm-debug.log*
|
.pnpm-debug.log*
|
||||||
lerna-debug.log*
|
|
||||||
|
|
||||||
node_modules
|
# env files (can opt-in for committing if needed)
|
||||||
dist
|
.env*
|
||||||
dist-ssr
|
|
||||||
*.local
|
|
||||||
|
|
||||||
# Editor directories and files
|
# vercel
|
||||||
.vscode/*
|
.vercel
|
||||||
!.vscode/extensions.json
|
|
||||||
.idea
|
# typescript
|
||||||
.DS_Store
|
*.tsbuildinfo
|
||||||
*.suo
|
next-env.d.ts
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
|
|||||||
@@ -1,73 +0,0 @@
|
|||||||
# React + TypeScript + Vite
|
|
||||||
|
|
||||||
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
|
||||||
|
|
||||||
Currently, two official plugins are available:
|
|
||||||
|
|
||||||
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
|
|
||||||
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
|
||||||
|
|
||||||
## React Compiler
|
|
||||||
|
|
||||||
The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
|
|
||||||
|
|
||||||
## Expanding the ESLint configuration
|
|
||||||
|
|
||||||
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
|
|
||||||
|
|
||||||
```js
|
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
// Other configs...
|
|
||||||
|
|
||||||
// Remove tseslint.configs.recommended and replace with this
|
|
||||||
tseslint.configs.recommendedTypeChecked,
|
|
||||||
// Alternatively, use this for stricter rules
|
|
||||||
tseslint.configs.strictTypeChecked,
|
|
||||||
// Optionally, add this for stylistic rules
|
|
||||||
tseslint.configs.stylisticTypeChecked,
|
|
||||||
|
|
||||||
// Other configs...
|
|
||||||
],
|
|
||||||
languageOptions: {
|
|
||||||
parserOptions: {
|
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
||||||
tsconfigRootDir: import.meta.dirname,
|
|
||||||
},
|
|
||||||
// other options...
|
|
||||||
},
|
|
||||||
},
|
|
||||||
])
|
|
||||||
```
|
|
||||||
|
|
||||||
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
|
|
||||||
|
|
||||||
```js
|
|
||||||
// eslint.config.js
|
|
||||||
import reactX from 'eslint-plugin-react-x'
|
|
||||||
import reactDom from 'eslint-plugin-react-dom'
|
|
||||||
|
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
// Other configs...
|
|
||||||
// Enable lint rules for React
|
|
||||||
reactX.configs['recommended-typescript'],
|
|
||||||
// Enable lint rules for React DOM
|
|
||||||
reactDom.configs.recommended,
|
|
||||||
],
|
|
||||||
languageOptions: {
|
|
||||||
parserOptions: {
|
|
||||||
project: ['./tsconfig.node.json', './tsconfig.app.json'],
|
|
||||||
tsconfigRootDir: import.meta.dirname,
|
|
||||||
},
|
|
||||||
// other options...
|
|
||||||
},
|
|
||||||
},
|
|
||||||
])
|
|
||||||
```
|
|
||||||
@@ -1,15 +1,17 @@
|
|||||||
{
|
{
|
||||||
"$schema": "https://ui.shadcn.com/schema.json",
|
"$schema": "https://ui.shadcn.com/schema.json",
|
||||||
"style": "default",
|
"style": "new-york",
|
||||||
"rsc": false,
|
"rsc": true,
|
||||||
"tsx": true,
|
"tsx": true,
|
||||||
"tailwind": {
|
"tailwind": {
|
||||||
"config": "tailwind.config.ts",
|
"config": "",
|
||||||
"css": "src/styles/globals.css",
|
"css": "src/app/globals.css",
|
||||||
"baseColor": "slate",
|
"baseColor": "neutral",
|
||||||
"cssVariables": true,
|
"cssVariables": true,
|
||||||
"prefix": ""
|
"prefix": ""
|
||||||
},
|
},
|
||||||
|
"iconLibrary": "lucide",
|
||||||
|
"rtl": false,
|
||||||
"aliases": {
|
"aliases": {
|
||||||
"components": "@/components",
|
"components": "@/components",
|
||||||
"utils": "@/lib/utils",
|
"utils": "@/lib/utils",
|
||||||
@@ -17,5 +19,5 @@
|
|||||||
"lib": "@/lib",
|
"lib": "@/lib",
|
||||||
"hooks": "@/hooks"
|
"hooks": "@/hooks"
|
||||||
},
|
},
|
||||||
"iconLibrary": "lucide"
|
"registries": {}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,23 +0,0 @@
|
|||||||
import js from '@eslint/js'
|
|
||||||
import globals from 'globals'
|
|
||||||
import reactHooks from 'eslint-plugin-react-hooks'
|
|
||||||
import reactRefresh from 'eslint-plugin-react-refresh'
|
|
||||||
import tseslint from 'typescript-eslint'
|
|
||||||
import { defineConfig, globalIgnores } from 'eslint/config'
|
|
||||||
|
|
||||||
export default defineConfig([
|
|
||||||
globalIgnores(['dist']),
|
|
||||||
{
|
|
||||||
files: ['**/*.{ts,tsx}'],
|
|
||||||
extends: [
|
|
||||||
js.configs.recommended,
|
|
||||||
tseslint.configs.recommended,
|
|
||||||
reactHooks.configs.flat.recommended,
|
|
||||||
reactRefresh.configs.vite,
|
|
||||||
],
|
|
||||||
languageOptions: {
|
|
||||||
ecmaVersion: 2020,
|
|
||||||
globals: globals.browser,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
])
|
|
||||||
18
frontend/eslint.config.mjs
Normal file
18
frontend/eslint.config.mjs
Normal file
@@ -0,0 +1,18 @@
|
|||||||
|
import { defineConfig, globalIgnores } from "eslint/config";
|
||||||
|
import nextVitals from "eslint-config-next/core-web-vitals";
|
||||||
|
import nextTs from "eslint-config-next/typescript";
|
||||||
|
|
||||||
|
const eslintConfig = defineConfig([
|
||||||
|
...nextVitals,
|
||||||
|
...nextTs,
|
||||||
|
// Override default ignores of eslint-config-next.
|
||||||
|
globalIgnores([
|
||||||
|
// Default ignores of eslint-config-next:
|
||||||
|
".next/**",
|
||||||
|
"out/**",
|
||||||
|
"build/**",
|
||||||
|
"next-env.d.ts",
|
||||||
|
]),
|
||||||
|
]);
|
||||||
|
|
||||||
|
export default eslintConfig;
|
||||||
@@ -1,13 +0,0 @@
|
|||||||
<!doctype html>
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
|
||||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
||||||
<title>frontend</title>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div id="root"></div>
|
|
||||||
<script type="module" src="/src/main.tsx"></script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
16
frontend/next.config.ts
Normal file
16
frontend/next.config.ts
Normal file
@@ -0,0 +1,16 @@
|
|||||||
|
import type { NextConfig } from 'next';
|
||||||
|
|
||||||
|
const nextConfig: NextConfig = {
|
||||||
|
images: {
|
||||||
|
remotePatterns: [
|
||||||
|
{
|
||||||
|
protocol: 'https',
|
||||||
|
hostname: 'images.unsplash.com',
|
||||||
|
port: '',
|
||||||
|
pathname: '/**',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default nextConfig;
|
||||||
@@ -1,59 +1,33 @@
|
|||||||
{
|
{
|
||||||
"name": "frontend",
|
"name": "frontend",
|
||||||
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"version": "0.0.0",
|
|
||||||
"type": "module",
|
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "vite",
|
"dev": "next dev",
|
||||||
"build": "tsc -b && vite build",
|
"build": "next build",
|
||||||
"lint": "eslint .",
|
"start": "next start",
|
||||||
"preview": "vite preview"
|
"lint": "eslint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@radix-ui/react-avatar": "^1.1.11",
|
|
||||||
"@radix-ui/react-checkbox": "^1.3.3",
|
|
||||||
"@radix-ui/react-collapsible": "^1.1.12",
|
|
||||||
"@radix-ui/react-dialog": "^1.1.15",
|
|
||||||
"@radix-ui/react-dropdown-menu": "^2.1.16",
|
|
||||||
"@radix-ui/react-label": "^2.1.8",
|
|
||||||
"@radix-ui/react-scroll-area": "^1.2.10",
|
|
||||||
"@radix-ui/react-select": "^2.2.6",
|
|
||||||
"@radix-ui/react-separator": "^1.1.8",
|
|
||||||
"@radix-ui/react-tabs": "^1.1.13",
|
|
||||||
"@radix-ui/react-toast": "^1.2.15",
|
|
||||||
"@radix-ui/react-tooltip": "^1.2.8",
|
|
||||||
"@tanstack/react-form": "^1.28.3",
|
|
||||||
"@tanstack/react-query": "^5.90.21",
|
|
||||||
"@tanstack/react-router": "^1.162.2",
|
|
||||||
"axios": "^1.13.5",
|
|
||||||
"date-fns": "^4.1.0",
|
|
||||||
"lucide-react": "^0.575.0",
|
|
||||||
"react": "^19.2.0",
|
|
||||||
"react-dom": "^19.2.0",
|
|
||||||
"zod": "^4.3.6"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@eslint/js": "^9.39.1",
|
|
||||||
"@radix-ui/react-slot": "^1.2.4",
|
|
||||||
"@tailwindcss/postcss": "^4.2.0",
|
|
||||||
"@tailwindcss/vite": "^4.2.0",
|
|
||||||
"@types/node": "^24.10.1",
|
|
||||||
"@types/react": "^19.2.7",
|
|
||||||
"@types/react-dom": "^19.2.3",
|
|
||||||
"@vitejs/plugin-react": "^5.1.1",
|
|
||||||
"autoprefixer": "^10.4.24",
|
|
||||||
"class-variance-authority": "^0.7.1",
|
"class-variance-authority": "^0.7.1",
|
||||||
"clsx": "^2.1.1",
|
"clsx": "^2.1.1",
|
||||||
"eslint": "^9.39.1",
|
"lucide-react": "^0.575.0",
|
||||||
"eslint-plugin-react-hooks": "^7.0.1",
|
"next": "16.1.6",
|
||||||
"eslint-plugin-react-refresh": "^0.4.24",
|
"radix-ui": "^1.4.3",
|
||||||
"globals": "^16.5.0",
|
"react": "19.2.3",
|
||||||
"postcss": "^8.5.6",
|
"react-dom": "19.2.3",
|
||||||
"tailwind-merge": "^3.5.0",
|
"tailwind-merge": "^3.5.0"
|
||||||
"tailwindcss": "^4.2.0",
|
},
|
||||||
"tailwindcss-animate": "^1.0.7",
|
"devDependencies": {
|
||||||
"typescript": "~5.9.3",
|
"@tailwindcss/postcss": "^4",
|
||||||
"typescript-eslint": "^8.48.0",
|
"@types/node": "^20",
|
||||||
"vite": "^7.3.1"
|
"@types/react": "^19",
|
||||||
|
"@types/react-dom": "^19",
|
||||||
|
"eslint": "^9",
|
||||||
|
"eslint-config-next": "16.1.6",
|
||||||
|
"shadcn": "^3.8.5",
|
||||||
|
"tailwindcss": "^4",
|
||||||
|
"tw-animate-css": "^1.4.0",
|
||||||
|
"typescript": "^5"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +0,0 @@
|
|||||||
export default {
|
|
||||||
plugins: {
|
|
||||||
'@tailwindcss/postcss': {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
7
frontend/postcss.config.mjs
Normal file
7
frontend/postcss.config.mjs
Normal file
@@ -0,0 +1,7 @@
|
|||||||
|
const config = {
|
||||||
|
plugins: {
|
||||||
|
"@tailwindcss/postcss": {},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default config;
|
||||||
1
frontend/public/file.svg
Normal file
1
frontend/public/file.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
|
||||||
|
After Width: | Height: | Size: 391 B |
1
frontend/public/globe.svg
Normal file
1
frontend/public/globe.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
1
frontend/public/next.svg
Normal file
1
frontend/public/next.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
|
||||||
|
After Width: | Height: | Size: 1.3 KiB |
1
frontend/public/vercel.svg
Normal file
1
frontend/public/vercel.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
|
||||||
|
After Width: | Height: | Size: 128 B |
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 1.5 KiB |
1
frontend/public/window.svg
Normal file
1
frontend/public/window.svg
Normal file
@@ -0,0 +1 @@
|
|||||||
|
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
|
||||||
|
After Width: | Height: | Size: 385 B |
@@ -1,10 +0,0 @@
|
|||||||
{
|
|
||||||
"version": 1,
|
|
||||||
"skills": {
|
|
||||||
"shadcn-ui": {
|
|
||||||
"source": "google-labs-code/stitch-skills",
|
|
||||||
"sourceType": "github",
|
|
||||||
"computedHash": "dadbca54d35a33fe73e40018611af2179689305bf6da812ab2643987fefd9da3"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,42 +0,0 @@
|
|||||||
#root {
|
|
||||||
max-width: 1280px;
|
|
||||||
margin: 0 auto;
|
|
||||||
padding: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
height: 6em;
|
|
||||||
padding: 1.5em;
|
|
||||||
will-change: filter;
|
|
||||||
transition: filter 300ms;
|
|
||||||
}
|
|
||||||
.logo:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #646cffaa);
|
|
||||||
}
|
|
||||||
.logo.react:hover {
|
|
||||||
filter: drop-shadow(0 0 2em #61dafbaa);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes logo-spin {
|
|
||||||
from {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: rotate(360deg);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-reduced-motion: no-preference) {
|
|
||||||
a:nth-of-type(2) .logo {
|
|
||||||
animation: logo-spin infinite 20s linear;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
padding: 2em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.read-the-docs {
|
|
||||||
color: #888;
|
|
||||||
}
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
|
|
||||||
function App() {
|
|
||||||
return (
|
|
||||||
<div className="min-h-screen bg-background">
|
|
||||||
<div className="container mx-auto p-6">
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Quasar - Biblioteca de Videojuegos</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Aplicación para gestionar tu colección personal de videojuegos
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<div className="flex gap-4">
|
|
||||||
<Button>Botón Primario</Button>
|
|
||||||
<Button variant="secondary">Botón Secundario</Button>
|
|
||||||
<Button variant="outline">Botón Outline</Button>
|
|
||||||
</div>
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Input placeholder="Buscar juegos..." />
|
|
||||||
</div>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Badge variant="default">Etiqueta</Badge>
|
|
||||||
<Badge variant="secondary">Secundaria</Badge>
|
|
||||||
<Badge variant="outline">Outline</Badge>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export default App;
|
|
||||||
@@ -1,165 +0,0 @@
|
|||||||
import { type ClassValue, clsx } from 'clsx';
|
|
||||||
import { twMerge } from 'tailwind-merge';
|
|
||||||
|
|
||||||
// Función para unir clases de Tailwind
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
|
||||||
return twMerge(clsx(inputs));
|
|
||||||
}
|
|
||||||
|
|
||||||
// Configuración base de la API
|
|
||||||
const API_BASE_URL = import.meta.env.VITE_API_URL || 'http://localhost:3000';
|
|
||||||
|
|
||||||
// Interceptor para manejar errores comunes
|
|
||||||
async function handleApiError(response: Response) {
|
|
||||||
if (!response.ok) {
|
|
||||||
const errorData = await response.json().catch(() => ({}));
|
|
||||||
|
|
||||||
// Manejar errores de autenticación
|
|
||||||
if (response.status === 401) {
|
|
||||||
throw new Error('No autorizado. Por favor inicia sesión.');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Manejar errores de validación
|
|
||||||
if (response.status === 422) {
|
|
||||||
const fieldErrors = errorData.errors || {};
|
|
||||||
const errorMessage = Object.entries(fieldErrors)
|
|
||||||
.map(([field, errors]) => `${field}: ${Array.isArray(errors) ? errors.join(', ') : errors}`)
|
|
||||||
.join('; ');
|
|
||||||
throw new Error(errorMessage || 'Error de validación');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Manejar errores de servidor
|
|
||||||
if (response.status >= 500) {
|
|
||||||
throw new Error('Error del servidor. Por favor intenta de nuevo más tarde.');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Manejar otros errores
|
|
||||||
throw new Error(errorData.message || 'Error en la solicitud');
|
|
||||||
}
|
|
||||||
|
|
||||||
return response;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Función genérica para peticiones GET
|
|
||||||
export async function apiGet<T>(endpoint: string, params?: Record<string, any>): Promise<T> {
|
|
||||||
const url = new URL(`${API_BASE_URL}${endpoint}`);
|
|
||||||
|
|
||||||
if (params) {
|
|
||||||
Object.entries(params).forEach(([key, value]) => {
|
|
||||||
if (value !== undefined && value !== null) {
|
|
||||||
url.searchParams.append(key, String(value));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await fetch(url.toString(), {
|
|
||||||
method: 'GET',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await handleApiError(response);
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Función genérica para peticiones POST
|
|
||||||
export async function apiPost<T>(endpoint: string, data: any): Promise<T> {
|
|
||||||
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify(data),
|
|
||||||
});
|
|
||||||
|
|
||||||
await handleApiError(response);
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Función genérica para peticiones PUT
|
|
||||||
export async function apiPut<T>(endpoint: string, data: any): Promise<T> {
|
|
||||||
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
|
|
||||||
method: 'PUT',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
body: JSON.stringify(data),
|
|
||||||
});
|
|
||||||
|
|
||||||
await handleApiError(response);
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Función genérica para peticiones DELETE
|
|
||||||
export async function apiDelete<T>(endpoint: string): Promise<T> {
|
|
||||||
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
|
|
||||||
method: 'DELETE',
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
await handleApiError(response);
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Función para subir archivos
|
|
||||||
export async function apiUpload<T>(
|
|
||||||
endpoint: string,
|
|
||||||
file: File,
|
|
||||||
additionalData?: Record<string, any>
|
|
||||||
): Promise<T> {
|
|
||||||
const formData = new FormData();
|
|
||||||
formData.append('file', file);
|
|
||||||
|
|
||||||
if (additionalData) {
|
|
||||||
Object.entries(additionalData).forEach(([key, value]) => {
|
|
||||||
formData.append(key, String(value));
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await fetch(`${API_BASE_URL}${endpoint}`, {
|
|
||||||
method: 'POST',
|
|
||||||
body: formData,
|
|
||||||
});
|
|
||||||
|
|
||||||
await handleApiError(response);
|
|
||||||
return response.json();
|
|
||||||
}
|
|
||||||
|
|
||||||
// Función para peticiones con paginación
|
|
||||||
export async function apiGetPaginated<T>(
|
|
||||||
endpoint: string,
|
|
||||||
page: number = 1,
|
|
||||||
limit: number = 10,
|
|
||||||
filters?: Record<string, any>
|
|
||||||
): Promise<{
|
|
||||||
data: T[];
|
|
||||||
pagination: {
|
|
||||||
page: number;
|
|
||||||
limit: number;
|
|
||||||
total: number;
|
|
||||||
totalPages: number;
|
|
||||||
};
|
|
||||||
}> {
|
|
||||||
const params = {
|
|
||||||
page,
|
|
||||||
limit,
|
|
||||||
...filters,
|
|
||||||
};
|
|
||||||
|
|
||||||
return apiGet(endpoint, params);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Función para buscar
|
|
||||||
export async function apiSearch<T>(
|
|
||||||
endpoint: string,
|
|
||||||
query: string,
|
|
||||||
filters?: Record<string, any>
|
|
||||||
): Promise<T[]> {
|
|
||||||
return apiGet(endpoint, {
|
|
||||||
search: query,
|
|
||||||
...filters,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
@@ -1,80 +0,0 @@
|
|||||||
import { apiGet, apiPost, apiPut, apiDelete, apiGetPaginated, apiSearch } from './client';
|
|
||||||
import type { Game, GameFilters, GameFormData, PaginatedResponse } from '@/types';
|
|
||||||
|
|
||||||
// Obtener todos los juegos con paginación
|
|
||||||
export const getGames = async (page: number = 1, limit: number = 10, filters?: GameFilters) => {
|
|
||||||
return apiGetPaginated<Game>('/api/games', page, limit, filters);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener un juego por ID
|
|
||||||
export const getGameById = async (id: number) => {
|
|
||||||
return apiGet<Game>(`/api/games/${id}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Crear un nuevo juego
|
|
||||||
export const createGame = async (data: GameFormData) => {
|
|
||||||
return apiPost<Game>('/api/games', data);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Actualizar un juego existente
|
|
||||||
export const updateGame = async (id: number, data: GameFormData) => {
|
|
||||||
return apiPut<Game>(`/api/games/${id}`, data);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Eliminar un juego
|
|
||||||
export const deleteGame = async (id: number) => {
|
|
||||||
return apiDelete(`/api/games/${id}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Buscar juegos
|
|
||||||
export const searchGames = async (query: string, filters?: GameFilters) => {
|
|
||||||
return apiSearch<Game>('/api/games', query, filters);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener juegos por plataforma
|
|
||||||
export const getGamesByPlatform = async (
|
|
||||||
platformId: number,
|
|
||||||
page: number = 1,
|
|
||||||
limit: number = 10
|
|
||||||
) => {
|
|
||||||
return apiGetPaginated<Game>(`/api/games/platform/${platformId}`, page, limit);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener juegos por etiqueta
|
|
||||||
export const getGamesByTag = async (tagId: number, page: number = 1, limit: number = 10) => {
|
|
||||||
return apiGetPaginated<Game>(`/api/games/tag/${tagId}`, page, limit);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener juegos sin ROM
|
|
||||||
export const getGamesWithoutRom = async (page: number = 1, limit: number = 10) => {
|
|
||||||
return apiGetPaginated<Game>('/api/games/without-rom', page, limit);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener juegos metadata pendiente
|
|
||||||
export const getGamesWithPendingMetadata = async (page: number = 1, limit: number = 10) => {
|
|
||||||
return apiGetPaginated<Game>('/api/games/pending-metadata', page, limit);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Actualizar metadata de un juego
|
|
||||||
export const updateGameMetadata = async (id: number, metadata: any) => {
|
|
||||||
return apiPut<Game>(`/api/games/${id}/metadata`, metadata);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Enriquecer metadata de un juego
|
|
||||||
export const enrichGameMetadata = async (id: number, source: 'igdb' | 'rawg' | 'thegamesdb') => {
|
|
||||||
return apiPost<Game>(`/api/games/${id}/enrich`, { source });
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener estadísticas de juegos
|
|
||||||
export const getGameStats = async () => {
|
|
||||||
return apiGet<{
|
|
||||||
totalGames: number;
|
|
||||||
gamesWithRom: number;
|
|
||||||
gamesWithoutRom: number;
|
|
||||||
gamesWithMetadata: number;
|
|
||||||
gamesWithoutMetadata: number;
|
|
||||||
totalPlatforms: number;
|
|
||||||
totalTags: number;
|
|
||||||
averageRating: number;
|
|
||||||
}>('/api/games/stats');
|
|
||||||
};
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
import { apiGet, apiPost, apiPut, apiDelete, apiUpload } from './client';
|
|
||||||
import type { ImportRomFormData } from '@/types';
|
|
||||||
|
|
||||||
// Iniciar escaneo de directorio
|
|
||||||
export const startDirectoryScan = async (directoryPath: string) => {
|
|
||||||
return apiPost('/api/import/scan', { directoryPath });
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener estado del escaneo
|
|
||||||
export const getScanStatus = async (scanId: string) => {
|
|
||||||
return apiGet(`/api/import/scan/${scanId}/status`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener lista de ROMs detectadas
|
|
||||||
export const getDetectedRoms = async (scanId: string) => {
|
|
||||||
return apiGet(`/api/import/scan/${scanId}/roms`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Procesar ROMs detectadas
|
|
||||||
export const processDetectedRoms = async (scanId: string, romIds: number[]) => {
|
|
||||||
return apiPost(`/api/import/scan/${scanId}/process`, { romIds });
|
|
||||||
};
|
|
||||||
|
|
||||||
// Importar ROM manualmente
|
|
||||||
export const importRom = async (data: ImportRomFormData & { file: File }) => {
|
|
||||||
const { file, ...rest } = data;
|
|
||||||
return apiUpload('/api/import/rom', file, rest);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener historial de importaciones
|
|
||||||
export const getImportHistory = async (page: number = 1, limit: number = 10) => {
|
|
||||||
return apiGet(`/api/import/history?page=${page}&limit=${limit}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener estadísticas de importación
|
|
||||||
export const getImportStats = async () => {
|
|
||||||
return apiGet<{
|
|
||||||
totalImports: number;
|
|
||||||
successfulImports: number;
|
|
||||||
failedImports: number;
|
|
||||||
totalRomsScanned: number;
|
|
||||||
totalRomsImported: number;
|
|
||||||
averageProcessingTime: number;
|
|
||||||
lastImportDate?: string;
|
|
||||||
}>('/api/import/stats');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Cancelar escaneo en progreso
|
|
||||||
export const cancelScan = async (scanId: string) => {
|
|
||||||
return apiDelete(`/api/import/scan/${scanId}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Reintentar importación fallida
|
|
||||||
export const retryImport = async (importId: number) => {
|
|
||||||
return apiPost(`/api/import/retry/${importId}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Eliminar registro de importación
|
|
||||||
export const deleteImportRecord = async (importId: number) => {
|
|
||||||
return apiDelete(`/api/import/history/${importId}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener información de archivo ROM
|
|
||||||
export const getRomInfo = async (romPath: string) => {
|
|
||||||
return apiGet(`/api/import/rom-info?path=${encodeURIComponent(romPath)}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Verificar integridad de ROM
|
|
||||||
export const verifyRomIntegrity = async (romPath: string, romType: string) => {
|
|
||||||
return apiPost('/api/import/verify-rom', { romPath, romType });
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener directorios disponibles para escaneo
|
|
||||||
export const getAvailableDirectories = async () => {
|
|
||||||
return apiGet<string[]>('/api/import/directories');
|
|
||||||
};
|
|
||||||
@@ -1,52 +0,0 @@
|
|||||||
import { apiGet, apiPost, apiPut, apiDelete, apiGetPaginated, apiSearch } from './client';
|
|
||||||
import type { Platform, PlatformFilters, PlatformFormData } from '@/types';
|
|
||||||
|
|
||||||
// Obtener todas las plataformas con paginación
|
|
||||||
export const getPlatforms = async (
|
|
||||||
page: number = 1,
|
|
||||||
limit: number = 10,
|
|
||||||
filters?: PlatformFilters
|
|
||||||
) => {
|
|
||||||
return apiGetPaginated<Platform>('/api/platforms', page, limit, filters);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener todas las plataformas (sin paginación para selectores)
|
|
||||||
export const getAllPlatforms = async () => {
|
|
||||||
return apiGet<Platform[]>('/api/platforms/all');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener una plataforma por ID
|
|
||||||
export const getPlatformById = async (id: number) => {
|
|
||||||
return apiGet<Platform>(`/api/platforms/${id}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Crear una nueva plataforma
|
|
||||||
export const createPlatform = async (data: PlatformFormData) => {
|
|
||||||
return apiPost<Platform>('/api/platforms', data);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Actualizar una plataforma existente
|
|
||||||
export const updatePlatform = async (id: number, data: PlatformFormData) => {
|
|
||||||
return apiPut<Platform>(`/api/platforms/${id}`, data);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Eliminar una plataforma
|
|
||||||
export const deletePlatform = async (id: number) => {
|
|
||||||
return apiDelete(`/api/platforms/${id}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Buscar plataformas
|
|
||||||
export const searchPlatforms = async (query: string, filters?: PlatformFilters) => {
|
|
||||||
return apiSearch<Platform>('/api/platforms', query, filters);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener estadísticas de plataformas
|
|
||||||
export const getPlatformStats = async () => {
|
|
||||||
return apiGet<{
|
|
||||||
totalPlatforms: number;
|
|
||||||
totalGames: number;
|
|
||||||
averageGamesPerPlatform: number;
|
|
||||||
mostPopularPlatform: string;
|
|
||||||
leastPopularPlatform: string;
|
|
||||||
}>('/api/platforms/stats');
|
|
||||||
};
|
|
||||||
@@ -1,107 +0,0 @@
|
|||||||
import { apiGet, apiPost, apiPut } from './client';
|
|
||||||
import type { SettingsFormData } from '@/types';
|
|
||||||
|
|
||||||
// Obtener configuración actual
|
|
||||||
export const getSettings = async () => {
|
|
||||||
return apiGet('/api/settings');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Actualizar configuración
|
|
||||||
export const updateSettings = async (data: SettingsFormData) => {
|
|
||||||
return apiPut('/api/settings', data);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Probar conexión con IGDB
|
|
||||||
export const testIgdbConnection = async (apiKey: string) => {
|
|
||||||
return apiPost('/api/settings/test-igdb', { apiKey });
|
|
||||||
};
|
|
||||||
|
|
||||||
// Probar conexión con RAWG
|
|
||||||
export const testRawgConnection = async (apiKey: string) => {
|
|
||||||
return apiPost('/api/settings/test-rawg', { apiKey });
|
|
||||||
};
|
|
||||||
|
|
||||||
// Probar conexión con TheGamesDB
|
|
||||||
export const testThegamesdbConnection = async (apiKey: string) => {
|
|
||||||
return apiPost('/api/settings/test-thegamesdb', { apiKey });
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener estado de servicios externos
|
|
||||||
export const getExternalServicesStatus = async () => {
|
|
||||||
return apiGet<{
|
|
||||||
igdb: { connected: boolean; lastChecked?: string };
|
|
||||||
rawg: { connected: boolean; lastChecked?: string };
|
|
||||||
thegamesdb: { connected: boolean; lastChecked?: string };
|
|
||||||
}>('/api/settings/services-status');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener configuración de importación automática
|
|
||||||
export const getAutoImportConfig = async () => {
|
|
||||||
return apiGet('/api/settings/auto-import');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Actualizar configuración de importación automática
|
|
||||||
export const updateAutoImportConfig = async (enabled: boolean, directory?: string) => {
|
|
||||||
return apiPut('/api/settings/auto-import', { enabled, directory });
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener configuración de exportación
|
|
||||||
export const getExportConfig = async () => {
|
|
||||||
return apiGet('/api/settings/export');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Actualizar configuración de exportación
|
|
||||||
export const updateExportConfig = async (format: 'csv' | 'json', fields: string[]) => {
|
|
||||||
return apiPut('/api/settings/export', { format, fields });
|
|
||||||
};
|
|
||||||
|
|
||||||
// Exportar datos
|
|
||||||
export const exportData = async (format: 'csv' | 'json', filters?: Record<string, any>) => {
|
|
||||||
const params = new URLSearchParams();
|
|
||||||
params.append('format', format);
|
|
||||||
|
|
||||||
if (filters) {
|
|
||||||
Object.entries(filters).forEach(([key, value]) => {
|
|
||||||
if (value !== undefined && value !== null) {
|
|
||||||
params.append(key, String(value));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
const response = await fetch(`/api/settings/export?${params.toString()}`, {
|
|
||||||
method: 'GET',
|
|
||||||
});
|
|
||||||
|
|
||||||
if (!response.ok) {
|
|
||||||
throw new Error('Error al exportar datos');
|
|
||||||
}
|
|
||||||
|
|
||||||
return response.blob();
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener estadísticas del sistema
|
|
||||||
export const getSystemStats = async () => {
|
|
||||||
return apiGet<{
|
|
||||||
totalGames: number;
|
|
||||||
totalPlatforms: number;
|
|
||||||
totalTags: number;
|
|
||||||
totalRoms: number;
|
|
||||||
totalSize: number;
|
|
||||||
averageRating: number;
|
|
||||||
recentActivity: Array<{
|
|
||||||
type: string;
|
|
||||||
message: string;
|
|
||||||
timestamp: string;
|
|
||||||
}>;
|
|
||||||
}>('/api/settings/system-stats');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Limpiar caché
|
|
||||||
export const clearCache = async () => {
|
|
||||||
return apiPost('/api/settings/clear-cache');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener versión del sistema
|
|
||||||
export const getSystemVersion = async () => {
|
|
||||||
return apiGet('/api/settings/version');
|
|
||||||
};
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
import { apiGet, apiPost, apiPut, apiDelete, apiGetPaginated, apiSearch } from './client';
|
|
||||||
import type { Tag, TagFilters, TagFormData } from '@/types';
|
|
||||||
|
|
||||||
// Obtener todas las etiquetas con paginación
|
|
||||||
export const getTags = async (page: number = 1, limit: number = 10, filters?: TagFilters) => {
|
|
||||||
return apiGetPaginated<Tag>('/api/tags', page, limit, filters);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener todas las etiquetas (sin paginación para selectores)
|
|
||||||
export const getAllTags = async () => {
|
|
||||||
return apiGet<Tag[]>('/api/tags/all');
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener una etiqueta por ID
|
|
||||||
export const getTagById = async (id: number) => {
|
|
||||||
return apiGet<Tag>(`/api/tags/${id}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Crear una nueva etiqueta
|
|
||||||
export const createTag = async (data: TagFormData) => {
|
|
||||||
return apiPost<Tag>('/api/tags', data);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Actualizar una etiqueta existente
|
|
||||||
export const updateTag = async (id: number, data: TagFormData) => {
|
|
||||||
return apiPut<Tag>(`/api/tags/${id}`, data);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Eliminar una etiqueta
|
|
||||||
export const deleteTag = async (id: number) => {
|
|
||||||
return apiDelete(`/api/tags/${id}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Buscar etiquetas
|
|
||||||
export const searchTags = async (query: string, filters?: TagFilters) => {
|
|
||||||
return apiSearch<Tag>('/api/tags', query, filters);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener etiquetas más usadas
|
|
||||||
export const getPopularTags = async (limit: number = 10) => {
|
|
||||||
return apiGet<Tag[]>(`/api/tags/popular?limit=${limit}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener etiquetas por juego
|
|
||||||
export const getTagsByGame = async (gameId: number) => {
|
|
||||||
return apiGet<Tag[]>(`/api/tags/game/${gameId}`);
|
|
||||||
};
|
|
||||||
|
|
||||||
// Asignar etiquetas a un juego
|
|
||||||
export const assignTagsToGame = async (gameId: number, tagIds: number[]) => {
|
|
||||||
return apiPost(`/api/games/${gameId}/tags`, { tagIds });
|
|
||||||
};
|
|
||||||
|
|
||||||
// Eliminar etiquetas de un juego
|
|
||||||
export const removeTagsFromGame = async (gameId: number, tagIds: number[]) => {
|
|
||||||
return apiPost(`/api/games/${gameId}/tags/remove`, { tagIds });
|
|
||||||
};
|
|
||||||
|
|
||||||
// Obtener estadísticas de etiquetas
|
|
||||||
export const getTagStats = async () => {
|
|
||||||
return apiGet<{
|
|
||||||
totalTags: number;
|
|
||||||
totalTaggedGames: number;
|
|
||||||
averageTagsPerGame: number;
|
|
||||||
mostUsedTag: string;
|
|
||||||
leastUsedTag: string;
|
|
||||||
}>('/api/tags/stats');
|
|
||||||
};
|
|
||||||
BIN
frontend/src/app/favicon.ico
Normal file
BIN
frontend/src/app/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
297
frontend/src/app/globals.css
Normal file
297
frontend/src/app/globals.css
Normal file
@@ -0,0 +1,297 @@
|
|||||||
|
@import "tailwindcss";
|
||||||
|
@import "tw-animate-css";
|
||||||
|
@import "shadcn/tailwind.css";
|
||||||
|
|
||||||
|
@custom-variant dark (&:is(.dark *));
|
||||||
|
|
||||||
|
@theme inline {
|
||||||
|
--color-background: var(--background);
|
||||||
|
--color-foreground: var(--foreground);
|
||||||
|
--font-sans: var(--font-geist-sans);
|
||||||
|
--font-mono: var(--font-geist-mono);
|
||||||
|
--color-sidebar-ring: var(--sidebar-ring);
|
||||||
|
--color-sidebar-border: var(--sidebar-border);
|
||||||
|
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
|
||||||
|
--color-sidebar-accent: var(--sidebar-accent);
|
||||||
|
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
|
||||||
|
--color-sidebar-primary: var(--sidebar-primary);
|
||||||
|
--color-sidebar-foreground: var(--sidebar-foreground);
|
||||||
|
--color-sidebar: var(--sidebar);
|
||||||
|
--color-chart-5: var(--chart-5);
|
||||||
|
--color-chart-4: var(--chart-4);
|
||||||
|
--color-chart-3: var(--chart-3);
|
||||||
|
--color-chart-2: var(--chart-2);
|
||||||
|
--color-chart-1: var(--chart-1);
|
||||||
|
--color-ring: var(--ring);
|
||||||
|
--color-input: var(--input);
|
||||||
|
--color-border: var(--border);
|
||||||
|
--color-destructive: var(--destructive);
|
||||||
|
--color-accent-foreground: var(--accent-foreground);
|
||||||
|
--color-accent: var(--accent);
|
||||||
|
--color-muted-foreground: var(--muted-foreground);
|
||||||
|
--color-muted: var(--muted);
|
||||||
|
--color-secondary-foreground: var(--secondary-foreground);
|
||||||
|
--color-secondary: var(--secondary);
|
||||||
|
--color-primary-foreground: var(--primary-foreground);
|
||||||
|
--color-primary: var(--primary);
|
||||||
|
--color-popover-foreground: var(--popover-foreground);
|
||||||
|
--color-popover: var(--popover);
|
||||||
|
--color-card-foreground: var(--card-foreground);
|
||||||
|
--color-card: var(--card);
|
||||||
|
--radius-sm: calc(var(--radius) - 4px);
|
||||||
|
--radius-md: calc(var(--radius) - 2px);
|
||||||
|
--radius-lg: var(--radius);
|
||||||
|
--radius-xl: calc(var(--radius) + 4px);
|
||||||
|
--radius-2xl: calc(var(--radius) + 8px);
|
||||||
|
--radius-3xl: calc(var(--radius) + 12px);
|
||||||
|
--radius-4xl: calc(var(--radius) + 16px);
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--radius: 0.625rem;
|
||||||
|
--background: #0a0a12;
|
||||||
|
--foreground: oklch(0.985 0 0);
|
||||||
|
--card: oklch(0.11 0 0);
|
||||||
|
--card-foreground: oklch(0.985 0 0);
|
||||||
|
--popover: oklch(0.11 0 0);
|
||||||
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
|
--primary: #00d0e0;
|
||||||
|
--primary-foreground: #0a0a12;
|
||||||
|
--secondary: oklch(0.18 0 0);
|
||||||
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
--muted: oklch(0.18 0 0);
|
||||||
|
--muted-foreground: oklch(0.708 0 0);
|
||||||
|
--accent: #f0c040;
|
||||||
|
--accent-foreground: #0a0a12;
|
||||||
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
|
--border: oklch(1 0 0 / 10%);
|
||||||
|
--input: oklch(1 0 0 / 15%);
|
||||||
|
--ring: #00f0ff;
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.11 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-primary: #00f0ff;
|
||||||
|
--sidebar-primary-foreground: #0a0a12;
|
||||||
|
--sidebar-accent: oklch(0.18 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
|
--sidebar-ring: #00f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dark {
|
||||||
|
--background: #0a0a12;
|
||||||
|
--foreground: oklch(0.985 0 0);
|
||||||
|
--card: oklch(0.11 0 0);
|
||||||
|
--card-foreground: oklch(0.985 0 0);
|
||||||
|
--popover: oklch(0.11 0 0);
|
||||||
|
--popover-foreground: oklch(0.985 0 0);
|
||||||
|
--primary: #00d0e0;
|
||||||
|
--primary-foreground: #0a0a12;
|
||||||
|
--secondary: oklch(0.18 0 0);
|
||||||
|
--secondary-foreground: oklch(0.985 0 0);
|
||||||
|
--muted: oklch(0.18 0 0);
|
||||||
|
--muted-foreground: oklch(0.708 0 0);
|
||||||
|
--accent: #f0c040;
|
||||||
|
--accent-foreground: #0a0a12;
|
||||||
|
--destructive: oklch(0.704 0.191 22.216);
|
||||||
|
--border: oklch(1 0 0 / 10%);
|
||||||
|
--input: oklch(1 0 0 / 15%);
|
||||||
|
--ring: #00f0ff;
|
||||||
|
--chart-1: oklch(0.488 0.243 264.376);
|
||||||
|
--chart-2: oklch(0.696 0.17 162.48);
|
||||||
|
--chart-3: oklch(0.769 0.188 70.08);
|
||||||
|
--chart-4: oklch(0.627 0.265 303.9);
|
||||||
|
--chart-5: oklch(0.645 0.246 16.439);
|
||||||
|
--sidebar: oklch(0.11 0 0);
|
||||||
|
--sidebar-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-primary: #00f0ff;
|
||||||
|
--sidebar-primary-foreground: #0a0a12;
|
||||||
|
--sidebar-accent: oklch(0.18 0 0);
|
||||||
|
--sidebar-accent-foreground: oklch(0.985 0 0);
|
||||||
|
--sidebar-border: oklch(1 0 0 / 10%);
|
||||||
|
--sidebar-ring: #00f0ff;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Mass Effect-inspired theme customizations */
|
||||||
|
:root {
|
||||||
|
/* Custom colors for Mass Effect theme */
|
||||||
|
--mass-effect-dark: #0a0a12;
|
||||||
|
--mass-effect-cyan: #00d0e0;
|
||||||
|
--mass-effect-gold: #f0c040;
|
||||||
|
--mass-effect-cyan-glow: rgba(0, 208, 224, 0.5);
|
||||||
|
--mass-effect-gold-glow: rgba(240, 192, 64, 0.5);
|
||||||
|
--glass-bg: rgba(10, 10, 18, 0.7);
|
||||||
|
--glass-border: rgba(0, 208, 224, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glassmorphism effect */
|
||||||
|
.glass {
|
||||||
|
background: var(--glass-bg);
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
-webkit-backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid var(--glass-border);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Glow effects */
|
||||||
|
.glow-cyan {
|
||||||
|
box-shadow: 0 0 10px var(--mass-effect-cyan-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glow-cyan-intense {
|
||||||
|
box-shadow: 0 0 20px var(--mass-effect-cyan-glow), 0 0 40px var(--mass-effect-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
.glow-gold {
|
||||||
|
box-shadow: 0 0 10px var(--mass-effect-gold-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Text effects */
|
||||||
|
.text-glow-cyan {
|
||||||
|
text-shadow: 0 0 10px var(--mass-effect-cyan-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text-glow-gold {
|
||||||
|
text-shadow: 0 0 10px var(--mass-effect-gold-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Holographic effect */
|
||||||
|
.holographic {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.holographic::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
rgba(0, 240, 255, 0.2),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
animation: holographic-scan 3s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes holographic-scan {
|
||||||
|
0% {
|
||||||
|
left: -100%;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Pulse animation for system status */
|
||||||
|
@keyframes pulse {
|
||||||
|
0%, 100% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pulse {
|
||||||
|
animation: pulse 2s infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Hover glow effect */
|
||||||
|
.hover-glow:hover {
|
||||||
|
box-shadow: 0 0 15px var(--mass-effect-cyan-glow);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Starfield background */
|
||||||
|
.starfield {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
z-index: -1;
|
||||||
|
background-image:
|
||||||
|
radial-gradient(2px 2px at 20px 30px, #eee, transparent),
|
||||||
|
radial-gradient(2px 2px at 40px 70px, #eee, transparent),
|
||||||
|
radial-gradient(1px 1px at 50px 50px, #eee, transparent),
|
||||||
|
radial-gradient(1px 1px at 80px 10px, #eee, transparent),
|
||||||
|
radial-gradient(2px 2px at 130px 80px, #eee, transparent);
|
||||||
|
background-repeat: repeat;
|
||||||
|
background-size: 200px 200px;
|
||||||
|
opacity: 0.3;
|
||||||
|
animation: starfield-move 120s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes starfield-move {
|
||||||
|
from {
|
||||||
|
transform: translateX(0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
transform: translateX(-200px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Custom button styles */
|
||||||
|
.btn-mission {
|
||||||
|
background: linear-gradient(45deg, var(--mass-effect-cyan), var(--mass-effect-gold));
|
||||||
|
border: none;
|
||||||
|
color: var(--mass-effect-dark);
|
||||||
|
font-weight: bold;
|
||||||
|
text-transform: uppercase;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
padding: 12px 24px;
|
||||||
|
border-radius: 4px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-mission:hover {
|
||||||
|
transform: scale(1.05);
|
||||||
|
box-shadow: 0 0 20px var(--mass-effect-cyan-glow), 0 0 40px var(--mass-effect-gold-glow);
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-mission::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: -100%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(
|
||||||
|
90deg,
|
||||||
|
transparent,
|
||||||
|
rgba(255, 255, 255, 0.2),
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
transition: left 0.5s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-mission:hover::before {
|
||||||
|
left: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Search bar glow effect */
|
||||||
|
.search-glow:focus {
|
||||||
|
box-shadow: 0 0 0 1px var(--mass-effect-cyan), 0 0 15px var(--mass-effect-cyan-glow);
|
||||||
|
border-color: var(--mass-effect-cyan);
|
||||||
|
}
|
||||||
|
|
||||||
|
@layer base {
|
||||||
|
* {
|
||||||
|
@apply border-border outline-ring/50;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
@apply bg-background text-foreground;
|
||||||
|
font-family: 'Inter', sans-serif;
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
38
frontend/src/app/layout.tsx
Normal file
38
frontend/src/app/layout.tsx
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
import type { Metadata } from 'next';
|
||||||
|
import { Geist, Geist_Mono } from 'next/font/google';
|
||||||
|
import './globals.css';
|
||||||
|
|
||||||
|
const geistSans = Geist({
|
||||||
|
variable: '--font-geist-sans',
|
||||||
|
subsets: ['latin'],
|
||||||
|
});
|
||||||
|
|
||||||
|
const geistMono = Geist_Mono({
|
||||||
|
variable: '--font-geist-mono',
|
||||||
|
subsets: ['latin'],
|
||||||
|
});
|
||||||
|
|
||||||
|
export const metadata: Metadata = {
|
||||||
|
title: 'Quasar - Tu Biblioteca de Videojuegos',
|
||||||
|
description:
|
||||||
|
'Gestiona tu colección de videojuegos con Quasar. Organiza, escanea y explora tu biblioteca personal.',
|
||||||
|
keywords: ['videojuegos', 'emulador', 'retro gaming', 'video game library'],
|
||||||
|
openGraph: {
|
||||||
|
title: 'Quasar - Tu Biblioteca de Videojuegos',
|
||||||
|
description:
|
||||||
|
'Gestiona tu colección de videojuegos con Quasar. Organiza, escanea y explora tu biblioteca personal.',
|
||||||
|
type: 'website',
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
export default function RootLayout({
|
||||||
|
children,
|
||||||
|
}: Readonly<{
|
||||||
|
children: React.ReactNode;
|
||||||
|
}>) {
|
||||||
|
return (
|
||||||
|
<html lang="es" suppressHydrationWarning>
|
||||||
|
<body className={`${geistSans.variable} ${geistMono.variable} antialiased`}>{children}</body>
|
||||||
|
</html>
|
||||||
|
);
|
||||||
|
}
|
||||||
28
frontend/src/app/page.tsx
Normal file
28
frontend/src/app/page.tsx
Normal file
@@ -0,0 +1,28 @@
|
|||||||
|
import Navbar from '@/components/landing/Navbar';
|
||||||
|
import Hero from '@/components/landing/Hero';
|
||||||
|
import GameGrid from '@/components/landing/GameGrid';
|
||||||
|
import Footer from '@/components/landing/Footer';
|
||||||
|
|
||||||
|
export default function Home() {
|
||||||
|
return (
|
||||||
|
<div className="min-h-screen" style={{ backgroundColor: 'var(--mass-effect-dark)' }}>
|
||||||
|
{/* Starfield Background */}
|
||||||
|
<div className="starfield"></div>
|
||||||
|
|
||||||
|
{/* Navbar */}
|
||||||
|
<Navbar />
|
||||||
|
|
||||||
|
{/* Main Content */}
|
||||||
|
<main id="main-content" className="pt-16">
|
||||||
|
{/* Hero Section */}
|
||||||
|
<Hero />
|
||||||
|
|
||||||
|
{/* Game Grid Section */}
|
||||||
|
<GameGrid />
|
||||||
|
</main>
|
||||||
|
|
||||||
|
{/* Footer */}
|
||||||
|
<Footer />
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
@@ -1 +0,0 @@
|
|||||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="35.93" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 228"><path fill="#00D8FF" d="M210.483 73.824a171.49 171.49 0 0 0-8.24-2.597c.465-1.9.893-3.777 1.273-5.621c6.238-30.281 2.16-54.676-11.769-62.708c-13.355-7.7-35.196.329-57.254 19.526a171.23 171.23 0 0 0-6.375 5.848a155.866 155.866 0 0 0-4.241-3.917C100.759 3.829 77.587-4.822 63.673 3.233C50.33 10.957 46.379 33.89 51.995 62.588a170.974 170.974 0 0 0 1.892 8.48c-3.28.932-6.445 1.924-9.474 2.98C17.309 83.498 0 98.307 0 113.668c0 15.865 18.582 31.778 46.812 41.427a145.52 145.52 0 0 0 6.921 2.165a167.467 167.467 0 0 0-2.01 9.138c-5.354 28.2-1.173 50.591 12.134 58.266c13.744 7.926 36.812-.22 59.273-19.855a145.567 145.567 0 0 0 5.342-4.923a168.064 168.064 0 0 0 6.92 6.314c21.758 18.722 43.246 26.282 56.54 18.586c13.731-7.949 18.194-32.003 12.4-61.268a145.016 145.016 0 0 0-1.535-6.842c1.62-.48 3.21-.974 4.76-1.488c29.348-9.723 48.443-25.443 48.443-41.52c0-15.417-17.868-30.326-45.517-39.844Zm-6.365 70.984c-1.4.463-2.836.91-4.3 1.345c-3.24-10.257-7.612-21.163-12.963-32.432c5.106-11 9.31-21.767 12.459-31.957c2.619.758 5.16 1.557 7.61 2.4c23.69 8.156 38.14 20.213 38.14 29.504c0 9.896-15.606 22.743-40.946 31.14Zm-10.514 20.834c2.562 12.94 2.927 24.64 1.23 33.787c-1.524 8.219-4.59 13.698-8.382 15.893c-8.067 4.67-25.32-1.4-43.927-17.412a156.726 156.726 0 0 1-6.437-5.87c7.214-7.889 14.423-17.06 21.459-27.246c12.376-1.098 24.068-2.894 34.671-5.345a134.17 134.17 0 0 1 1.386 6.193ZM87.276 214.515c-7.882 2.783-14.16 2.863-17.955.675c-8.075-4.657-11.432-22.636-6.853-46.752a156.923 156.923 0 0 1 1.869-8.499c10.486 2.32 22.093 3.988 34.498 4.994c7.084 9.967 14.501 19.128 21.976 27.15a134.668 134.668 0 0 1-4.877 4.492c-9.933 8.682-19.886 14.842-28.658 17.94ZM50.35 144.747c-12.483-4.267-22.792-9.812-29.858-15.863c-6.35-5.437-9.555-10.836-9.555-15.216c0-9.322 13.897-21.212 37.076-29.293c2.813-.98 5.757-1.905 8.812-2.773c3.204 10.42 7.406 21.315 12.477 32.332c-5.137 11.18-9.399 22.249-12.634 32.792a134.718 134.718 0 0 1-6.318-1.979Zm12.378-84.26c-4.811-24.587-1.616-43.134 6.425-47.789c8.564-4.958 27.502 2.111 47.463 19.835a144.318 144.318 0 0 1 3.841 3.545c-7.438 7.987-14.787 17.08-21.808 26.988c-12.04 1.116-23.565 2.908-34.161 5.309a160.342 160.342 0 0 1-1.76-7.887Zm110.427 27.268a347.8 347.8 0 0 0-7.785-12.803c8.168 1.033 15.994 2.404 23.343 4.08c-2.206 7.072-4.956 14.465-8.193 22.045a381.151 381.151 0 0 0-7.365-13.322Zm-45.032-43.861c5.044 5.465 10.096 11.566 15.065 18.186a322.04 322.04 0 0 0-30.257-.006c4.974-6.559 10.069-12.652 15.192-18.18ZM82.802 87.83a323.167 323.167 0 0 0-7.227 13.238c-3.184-7.553-5.909-14.98-8.134-22.152c7.304-1.634 15.093-2.97 23.209-3.984a321.524 321.524 0 0 0-7.848 12.897Zm8.081 65.352c-8.385-.936-16.291-2.203-23.593-3.793c2.26-7.3 5.045-14.885 8.298-22.6a321.187 321.187 0 0 0 7.257 13.246c2.594 4.48 5.28 8.868 8.038 13.147Zm37.542 31.03c-5.184-5.592-10.354-11.779-15.403-18.433c4.902.192 9.899.29 14.978.29c5.218 0 10.376-.117 15.453-.343c-4.985 6.774-10.018 12.97-15.028 18.486Zm52.198-57.817c3.422 7.8 6.306 15.345 8.596 22.52c-7.422 1.694-15.436 3.058-23.88 4.071a382.417 382.417 0 0 0 7.859-13.026a347.403 347.403 0 0 0 7.425-13.565Zm-16.898 8.101a358.557 358.557 0 0 1-12.281 19.815a329.4 329.4 0 0 1-23.444.823c-7.967 0-15.716-.248-23.178-.732a310.202 310.202 0 0 1-12.513-19.846h.001a307.41 307.41 0 0 1-10.923-20.627a310.278 310.278 0 0 1 10.89-20.637l-.001.001a307.318 307.318 0 0 1 12.413-19.761c7.613-.576 15.42-.876 23.31-.876H128c7.926 0 15.743.303 23.354.883a329.357 329.357 0 0 1 12.335 19.695a358.489 358.489 0 0 1 11.036 20.54a329.472 329.472 0 0 1-11 20.722Zm22.56-122.124c8.572 4.944 11.906 24.881 6.52 51.026c-.344 1.668-.73 3.367-1.15 5.09c-10.622-2.452-22.155-4.275-34.23-5.408c-7.034-10.017-14.323-19.124-21.64-27.008a160.789 160.789 0 0 1 5.888-5.4c18.9-16.447 36.564-22.941 44.612-18.3ZM128 90.808c12.625 0 22.86 10.235 22.86 22.86s-10.235 22.86-22.86 22.86s-22.86-10.235-22.86-22.86s10.235-22.86 22.86-22.86Z"></path></svg>
|
|
||||||
|
Before Width: | Height: | Size: 4.0 KiB |
55
frontend/src/components/landing/Footer.tsx
Normal file
55
frontend/src/components/landing/Footer.tsx
Normal file
@@ -0,0 +1,55 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
|
||||||
|
const Footer = () => {
|
||||||
|
return (
|
||||||
|
<footer className="glass py-8 px-4" role="contentinfo">
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<div className="flex flex-col md:flex-row justify-between items-center">
|
||||||
|
{/* System Status */}
|
||||||
|
<div className="flex items-center mb-4 md:mb-0">
|
||||||
|
<div className="flex items-center mr-2">
|
||||||
|
<div
|
||||||
|
className="w-3 h-3 rounded-full mr-2 pulse"
|
||||||
|
style={{ backgroundColor: 'var(--mass-effect-cyan)' }}
|
||||||
|
></div>
|
||||||
|
<span
|
||||||
|
className="text-sm font-mono uppercase tracking-wider"
|
||||||
|
style={{ color: 'var(--mass-effect-cyan)' }}
|
||||||
|
>
|
||||||
|
SYSTEM STATUS: ONLINE
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Links */}
|
||||||
|
<div className="flex space-x-6 mb-4 md:mb-0">
|
||||||
|
<a href="#" className="text-gray-400 hover:text-cyan-400 transition-colors">
|
||||||
|
About
|
||||||
|
</a>
|
||||||
|
<a href="#" className="text-gray-400 hover:text-cyan-400 transition-colors">
|
||||||
|
Support
|
||||||
|
</a>
|
||||||
|
<a href="#" className="text-gray-400 hover:text-cyan-400 transition-colors">
|
||||||
|
API
|
||||||
|
</a>
|
||||||
|
<a href="#" className="text-gray-400 hover:text-cyan-400 transition-colors">
|
||||||
|
Privacy
|
||||||
|
</a>
|
||||||
|
<a href="#" className="text-gray-400 hover:text-cyan-400 transition-colors">
|
||||||
|
Terms
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Copyright */}
|
||||||
|
<div className="text-sm text-gray-400">
|
||||||
|
© {new Date().getFullYear()} QUASAR. All rights reserved.
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</footer>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Footer;
|
||||||
189
frontend/src/components/landing/GameGrid.tsx
Normal file
189
frontend/src/components/landing/GameGrid.tsx
Normal file
@@ -0,0 +1,189 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Card, CardContent } from '@/components/ui/card';
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
interface Game {
|
||||||
|
id: number;
|
||||||
|
title: string;
|
||||||
|
coverImage: string;
|
||||||
|
rating: number;
|
||||||
|
genre: string;
|
||||||
|
year: number;
|
||||||
|
platform: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
const GameGrid = () => {
|
||||||
|
const [hoveredGame, setHoveredGame] = useState<number | null>(null);
|
||||||
|
|
||||||
|
const games: Game[] = [
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
title: 'Nebula Warriors',
|
||||||
|
coverImage:
|
||||||
|
'https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80',
|
||||||
|
rating: 92,
|
||||||
|
genre: 'Action',
|
||||||
|
year: 2023,
|
||||||
|
platform: 'Multi',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
title: 'Cyber Revolution',
|
||||||
|
coverImage:
|
||||||
|
'https://images.unsplash.com/photo-1550745165-9bc0b252726a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
|
||||||
|
rating: 88,
|
||||||
|
genre: 'RPG',
|
||||||
|
year: 2022,
|
||||||
|
platform: 'PC',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 3,
|
||||||
|
title: 'Quantum Escape',
|
||||||
|
coverImage:
|
||||||
|
'https://images.unsplash.com/photo-1538481199705-c710c4e965fc?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
|
||||||
|
rating: 85,
|
||||||
|
genre: 'Puzzle',
|
||||||
|
year: 2023,
|
||||||
|
platform: 'Console',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 4,
|
||||||
|
title: 'Galactic Frontline',
|
||||||
|
coverImage:
|
||||||
|
'https://images.unsplash.com/photo-1550745165-9bc0b252726a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
|
||||||
|
rating: 90,
|
||||||
|
genre: 'Strategy',
|
||||||
|
year: 2023,
|
||||||
|
platform: 'Multi',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 5,
|
||||||
|
title: 'Digital Horizon',
|
||||||
|
coverImage:
|
||||||
|
'https://images.unsplash.com/photo-1518709268805-4e9042af2176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1170&q=80',
|
||||||
|
rating: 87,
|
||||||
|
genre: 'Racing',
|
||||||
|
year: 2022,
|
||||||
|
platform: 'Console',
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 6,
|
||||||
|
title: 'Shadow Protocol',
|
||||||
|
coverImage:
|
||||||
|
'https://images.unsplash.com/photo-1511512578047-dfb367046420?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=687&q=80',
|
||||||
|
rating: 91,
|
||||||
|
genre: 'Stealth',
|
||||||
|
year: 2023,
|
||||||
|
platform: 'PC',
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
return (
|
||||||
|
<section className="py-16 px-4" id="games" aria-labelledby="games-title">
|
||||||
|
<div className="container mx-auto">
|
||||||
|
<h2
|
||||||
|
id="games-title"
|
||||||
|
className="text-3xl md:text-4xl font-bold text-center mb-12 uppercase tracking-wider"
|
||||||
|
style={{
|
||||||
|
color: 'var(--mass-effect-gold)',
|
||||||
|
textShadow: '0 0 10px var(--mass-effect-gold-glow)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Game Library
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{games.map((game) => (
|
||||||
|
<Card
|
||||||
|
key={game.id}
|
||||||
|
className="relative overflow-hidden border-0 glass hover-glow cursor-pointer transition-all duration-300"
|
||||||
|
onMouseEnter={() => setHoveredGame(game.id)}
|
||||||
|
onMouseLeave={() => setHoveredGame(null)}
|
||||||
|
>
|
||||||
|
<div className="relative h-64">
|
||||||
|
<Image
|
||||||
|
src={game.coverImage}
|
||||||
|
alt={`Portada del juego ${game.title}`}
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
|
||||||
|
{/* Overlay with game info on hover */}
|
||||||
|
<div
|
||||||
|
className={`absolute inset-0 bg-black bg-opacity-80 flex flex-col justify-end p-4 transition-opacity duration-300 ${
|
||||||
|
hoveredGame === game.id ? 'opacity-100' : 'opacity-0'
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<h3
|
||||||
|
className="text-xl font-bold mb-2"
|
||||||
|
style={{ color: 'var(--mass-effect-cyan)' }}
|
||||||
|
>
|
||||||
|
{game.title}
|
||||||
|
</h3>
|
||||||
|
|
||||||
|
<div className="grid grid-cols-2 gap-2 text-sm">
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-400">RATING:</span>
|
||||||
|
<span className="ml-2 font-bold" style={{ color: 'var(--mass-effect-gold)' }}>
|
||||||
|
{game.rating}%
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-400">GENRE:</span>
|
||||||
|
<span className="ml-2">{game.genre}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-400">YEAR:</span>
|
||||||
|
<span className="ml-2">{game.year}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span className="text-gray-400">PLATFORM:</span>
|
||||||
|
<span className="ml-2">{game.platform}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Holographic border effect */}
|
||||||
|
{hoveredGame === game.id && (
|
||||||
|
<div
|
||||||
|
className="absolute inset-0 holographic pointer-events-none"
|
||||||
|
aria-hidden="true"
|
||||||
|
></div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<CardContent className="p-4">
|
||||||
|
<h3 className="text-lg font-bold mb-2" style={{ color: 'var(--mass-effect-cyan)' }}>
|
||||||
|
{game.title}
|
||||||
|
</h3>
|
||||||
|
<div className="flex justify-between items-center">
|
||||||
|
<div className="flex items-center">
|
||||||
|
<div
|
||||||
|
className="w-2 h-2 rounded-full mr-2"
|
||||||
|
style={{ backgroundColor: 'var(--mass-effect-gold)' }}
|
||||||
|
></div>
|
||||||
|
<span className="text-sm text-gray-300">{game.genre}</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center">
|
||||||
|
<span
|
||||||
|
className="text-sm font-bold mr-1"
|
||||||
|
style={{ color: 'var(--mass-effect-gold)' }}
|
||||||
|
>
|
||||||
|
{game.rating}
|
||||||
|
</span>
|
||||||
|
<span className="text-sm text-gray-400">/100</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GameGrid;
|
||||||
121
frontend/src/components/landing/Hero.tsx
Normal file
121
frontend/src/components/landing/Hero.tsx
Normal file
@@ -0,0 +1,121 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import Image from 'next/image';
|
||||||
|
|
||||||
|
const Hero = () => {
|
||||||
|
return (
|
||||||
|
<section
|
||||||
|
className="relative min-h-screen flex items-center justify-center overflow-hidden"
|
||||||
|
id="hero"
|
||||||
|
aria-labelledby="hero-title"
|
||||||
|
>
|
||||||
|
{/* Background Image */}
|
||||||
|
<div className="absolute inset-0 z-0">
|
||||||
|
<Image
|
||||||
|
src="https://images.unsplash.com/photo-1446776653964-20c1d3a81b06?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1740&q=80"
|
||||||
|
alt="Fondo espacial con estrellas para el juego destacado"
|
||||||
|
fill
|
||||||
|
className="object-cover"
|
||||||
|
priority
|
||||||
|
/>
|
||||||
|
<div className="absolute inset-0 bg-black opacity-60"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Holographic Border Effect */}
|
||||||
|
<div className="absolute inset-0 z-10 holographic pointer-events-none"></div>
|
||||||
|
|
||||||
|
{/* Content */}
|
||||||
|
<div className="relative z-20 text-center px-4 max-w-4xl mx-auto">
|
||||||
|
<div className="mb-6">
|
||||||
|
<h2
|
||||||
|
id="hero-title"
|
||||||
|
className="text-3xl md:text-4xl font-bold uppercase tracking-wider mb-4"
|
||||||
|
style={{
|
||||||
|
color: 'var(--mass-effect-gold)',
|
||||||
|
textShadow: '0 0 10px var(--mass-effect-gold-glow)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Featured Mission
|
||||||
|
</h2>
|
||||||
|
<h1
|
||||||
|
className="text-5xl md:text-7xl font-bold uppercase tracking-wider mb-6"
|
||||||
|
style={{
|
||||||
|
color: 'var(--mass-effect-cyan)',
|
||||||
|
textShadow: '0 0 15px var(--mass-effect-cyan-glow)',
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
Stellar Odyssey
|
||||||
|
</h1>
|
||||||
|
<p
|
||||||
|
className="text-lg md:text-xl text-white max-w-2xl mx-auto mb-8"
|
||||||
|
style={{ textShadow: '0 0 5px rgba(0, 0, 0, 0.8)' }}
|
||||||
|
>
|
||||||
|
Embark on an epic journey through uncharted galaxies. Command your starship, explore
|
||||||
|
alien worlds, and uncover the mysteries of the universe in this groundbreaking space
|
||||||
|
exploration adventure.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center">
|
||||||
|
<Button
|
||||||
|
className="btn-mission text-lg px-8 py-3"
|
||||||
|
onClick={() => console.log('Mission Start clicked')}
|
||||||
|
>
|
||||||
|
MISSION START
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="border-cyan-500 text-cyan-500 hover:bg-cyan-500 hover:text-black text-lg px-8 py-3"
|
||||||
|
onClick={() => console.log('Learn More clicked')}
|
||||||
|
>
|
||||||
|
LEARN MORE
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Game Stats */}
|
||||||
|
<div className="grid grid-cols-3 gap-4 mt-12 max-w-md mx-auto">
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold" style={{ color: 'var(--mass-effect-cyan)' }}>
|
||||||
|
94%
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-300">RATING</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold" style={{ color: 'var(--mass-effect-cyan)' }}>
|
||||||
|
50+
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-300">HOURS</div>
|
||||||
|
</div>
|
||||||
|
<div className="text-center">
|
||||||
|
<div className="text-2xl font-bold" style={{ color: 'var(--mass-effect-cyan)' }}>
|
||||||
|
4K
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-300">GRAPHICS</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scroll Indicator */}
|
||||||
|
<div className="absolute bottom-8 left-1/2 transform -translate-x-1/2 z-20">
|
||||||
|
<div className="animate-bounce">
|
||||||
|
<svg
|
||||||
|
width="30"
|
||||||
|
height="30"
|
||||||
|
viewBox="0 0 30 30"
|
||||||
|
fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M15 20L8 13L9.4 11.6L15 17.2L20.6 11.6L22 13L15 20Z"
|
||||||
|
fill="var(--mass-effect-cyan)"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Hero;
|
||||||
160
frontend/src/components/landing/Navbar.tsx
Normal file
160
frontend/src/components/landing/Navbar.tsx
Normal file
@@ -0,0 +1,160 @@
|
|||||||
|
'use client';
|
||||||
|
|
||||||
|
import React, { useState } from 'react';
|
||||||
|
import { Button } from '@/components/ui/button';
|
||||||
|
import { Input } from '@/components/ui/input';
|
||||||
|
|
||||||
|
const Navbar = () => {
|
||||||
|
const [isMenuOpen, setIsMenuOpen] = useState(false);
|
||||||
|
const [searchQuery, setSearchQuery] = useState('');
|
||||||
|
|
||||||
|
const toggleMenu = () => {
|
||||||
|
setIsMenuOpen(!isMenuOpen);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<nav className="fixed top-0 left-0 right-0 z-50 glass">
|
||||||
|
<div className="container mx-auto px-4 py-4">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
{/* Logo */}
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<h1
|
||||||
|
className="text-2xl font-bold text-glow-cyan"
|
||||||
|
style={{ color: 'var(--mass-effect-cyan)' }}
|
||||||
|
>
|
||||||
|
QUASAR
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Search Bar - Desktop */}
|
||||||
|
<div className="hidden md:flex flex-1 max-w-md mx-8">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="SEARCH GAMES..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="search-glow bg-transparent border border-gray-600 text-white placeholder-gray-400"
|
||||||
|
style={{ borderColor: 'var(--mass-effect-cyan)' }}
|
||||||
|
aria-label="Campo de búsqueda de juegos"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Links - Desktop */}
|
||||||
|
<div className="hidden md:flex items-center space-x-6">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-white hover:text-glow-cyan transition-colors"
|
||||||
|
style={{ textShadow: '0 0 5px var(--mass-effect-cyan-glow)' }}
|
||||||
|
>
|
||||||
|
GAMES
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-white hover:text-glow-cyan transition-colors"
|
||||||
|
style={{ textShadow: '0 0 5px var(--mass-effect-cyan-glow)' }}
|
||||||
|
>
|
||||||
|
LIBRARY
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-white hover:text-glow-cyan transition-colors"
|
||||||
|
style={{ textShadow: '0 0 5px var(--mass-effect-cyan-glow)' }}
|
||||||
|
>
|
||||||
|
STATS
|
||||||
|
</a>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="border-cyan-500 text-cyan-500 hover:bg-cyan-500 hover:text-black"
|
||||||
|
>
|
||||||
|
LOGIN
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu Button */}
|
||||||
|
<div className="md:hidden">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
onClick={toggleMenu}
|
||||||
|
className="text-white"
|
||||||
|
aria-label={isMenuOpen ? 'Cerrar menú' : 'Abrir menú'}
|
||||||
|
aria-expanded={isMenuOpen}
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="24"
|
||||||
|
height="24"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="2"
|
||||||
|
strokeLinecap="round"
|
||||||
|
strokeLinejoin="round"
|
||||||
|
>
|
||||||
|
{isMenuOpen ? (
|
||||||
|
<path d="M18 6L6 18M6 6l12 12" />
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<line x1="4" y1="6" x2="20" y2="6" />
|
||||||
|
<line x1="4" y1="12" x2="20" y2="12" />
|
||||||
|
<line x1="4" y1="18" x2="20" y2="18" />
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</svg>
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Mobile Menu */}
|
||||||
|
{isMenuOpen && (
|
||||||
|
<div className="md:hidden mt-4 glass rounded-lg p-4">
|
||||||
|
{/* Search Bar - Mobile */}
|
||||||
|
<div className="mb-4">
|
||||||
|
<Input
|
||||||
|
type="text"
|
||||||
|
placeholder="SEARCH GAMES..."
|
||||||
|
value={searchQuery}
|
||||||
|
onChange={(e) => setSearchQuery(e.target.value)}
|
||||||
|
className="search-glow bg-transparent border border-gray-600 text-white placeholder-gray-400 w-full"
|
||||||
|
style={{ borderColor: 'var(--mass-effect-cyan)' }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation Links - Mobile */}
|
||||||
|
<div className="flex flex-col space-y-3">
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-white hover:text-glow-cyan transition-colors py-2"
|
||||||
|
tabIndex={isMenuOpen ? 0 : -1}
|
||||||
|
>
|
||||||
|
GAMES
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-white hover:text-glow-cyan transition-colors py-2"
|
||||||
|
tabIndex={isMenuOpen ? 0 : -1}
|
||||||
|
>
|
||||||
|
LIBRARY
|
||||||
|
</a>
|
||||||
|
<a
|
||||||
|
href="#"
|
||||||
|
className="text-white hover:text-glow-cyan transition-colors py-2"
|
||||||
|
tabIndex={isMenuOpen ? 0 : -1}
|
||||||
|
>
|
||||||
|
STATS
|
||||||
|
</a>
|
||||||
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
className="border-cyan-500 text-cyan-500 hover:bg-cyan-500 hover:text-black w-full"
|
||||||
|
>
|
||||||
|
LOGIN
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</nav>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Navbar;
|
||||||
@@ -1,88 +0,0 @@
|
|||||||
import { Link, useLocation } from '@tanstack/react-router';
|
|
||||||
import { Menu, Search, Settings, Gamepad2, Home, FileText } from 'lucide-react';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
interface HeaderProps {
|
|
||||||
onMenuToggle?: () => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
const navigation = [
|
|
||||||
{ name: 'Dashboard', href: '/', icon: Home },
|
|
||||||
{ name: 'Juegos', href: '/games', icon: Gamepad2 },
|
|
||||||
{ name: 'Importar ROMs', href: '/import', icon: FileText },
|
|
||||||
{ name: 'Configuración', href: '/settings', icon: Settings },
|
|
||||||
];
|
|
||||||
|
|
||||||
export function Header({ onMenuToggle }: HeaderProps) {
|
|
||||||
const location = useLocation();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
||||||
<div className="container flex h-14 items-center">
|
|
||||||
{/* Botón de menú para móviles */}
|
|
||||||
<Button variant="ghost" size="sm" className="mr-4 md:hidden" onClick={onMenuToggle}>
|
|
||||||
<Menu className="h-5 w-5" />
|
|
||||||
<span className="sr-only">Toggle menu</span>
|
|
||||||
</Button>
|
|
||||||
|
|
||||||
{/* Logo y título */}
|
|
||||||
<div className="mr-4 hidden md:flex">
|
|
||||||
<Link to="/" className="mr-6 flex items-center space-x-2">
|
|
||||||
<Gamepad2 className="h-6 w-6" />
|
|
||||||
<span className="hidden font-bold sm:inline-block">Quasar</span>
|
|
||||||
</Link>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Navegación principal */}
|
|
||||||
<nav className="flex items-center space-x-6 text-sm font-medium">
|
|
||||||
{navigation.map((item) => {
|
|
||||||
const Icon = item.icon;
|
|
||||||
const isActive = location.pathname === item.href;
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Link
|
|
||||||
key={item.name}
|
|
||||||
to={item.href}
|
|
||||||
className={cn(
|
|
||||||
'transition-colors hover:text-foreground/80',
|
|
||||||
isActive ? 'text-foreground' : 'text-foreground/60'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
<span className="flex items-center space-x-1">
|
|
||||||
<Icon className="h-4 w-4" />
|
|
||||||
<span>{item.name}</span>
|
|
||||||
</span>
|
|
||||||
</Link>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
{/* Barra de búsqueda */}
|
|
||||||
<div className="flex flex-1 items-center justify-between space-x-2 md:justify-end">
|
|
||||||
<div className="w-full flex-1 md:w-auto md:flex-none">
|
|
||||||
{/* Placeholder para barra de búsqueda */}
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
className="relative h-8 w-full justify-start rounded-[0.5rem] bg-background text-sm font-normal text-muted-foreground shadow-none sm:pr-12 md:w-40 lg:w-64"
|
|
||||||
>
|
|
||||||
<Search className="mr-2 h-4 w-4" />
|
|
||||||
Buscar juegos...
|
|
||||||
<kbd className="pointer-events-none absolute right-[0.3rem] top-[0.3rem] hidden h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium opacity-100 sm:flex">
|
|
||||||
⌘K
|
|
||||||
</kbd>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Usuario y acciones */}
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Button variant="ghost" size="sm">
|
|
||||||
<Settings className="h-4 w-4" />
|
|
||||||
<span className="sr-only">Configuración</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,14 +0,0 @@
|
|||||||
import { Outlet } from '@tanstack/react-router';
|
|
||||||
import { AppSidebar } from './Sidebar';
|
|
||||||
|
|
||||||
export function Layout() {
|
|
||||||
return (
|
|
||||||
<AppSidebar>
|
|
||||||
<main className="flex-1 p-6">
|
|
||||||
<div className="space-y-6">
|
|
||||||
<Outlet />
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
</AppSidebar>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,309 +0,0 @@
|
|||||||
'use client';
|
|
||||||
|
|
||||||
import * as React from 'react';
|
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
|
|
||||||
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from '@/components/ui/collapsible';
|
|
||||||
import {
|
|
||||||
DropdownMenu,
|
|
||||||
DropdownMenuContent,
|
|
||||||
DropdownMenuItem,
|
|
||||||
DropdownMenuLabel,
|
|
||||||
DropdownMenuSeparator,
|
|
||||||
DropdownMenuTrigger,
|
|
||||||
} from '@/components/ui/dropdown-menu';
|
|
||||||
import {
|
|
||||||
Sidebar,
|
|
||||||
SidebarContent,
|
|
||||||
SidebarFooter,
|
|
||||||
SidebarGroup,
|
|
||||||
SidebarGroupLabel,
|
|
||||||
SidebarHeader,
|
|
||||||
SidebarInset,
|
|
||||||
SidebarMenu,
|
|
||||||
SidebarMenuButton,
|
|
||||||
SidebarMenuItem,
|
|
||||||
SidebarMenuSub,
|
|
||||||
SidebarMenuSubButton,
|
|
||||||
SidebarMenuSubItem,
|
|
||||||
SidebarProvider,
|
|
||||||
SidebarRail,
|
|
||||||
SidebarTrigger,
|
|
||||||
useSidebar,
|
|
||||||
} from '@/components/ui/sidebar';
|
|
||||||
import {
|
|
||||||
Gamepad2,
|
|
||||||
Home,
|
|
||||||
Settings,
|
|
||||||
User,
|
|
||||||
Database,
|
|
||||||
Star,
|
|
||||||
TrendingUp,
|
|
||||||
ChevronRight,
|
|
||||||
ChevronsUpDown,
|
|
||||||
} from 'lucide-react';
|
|
||||||
|
|
||||||
const data = {
|
|
||||||
user: {
|
|
||||||
name: 'Game Library',
|
|
||||||
email: 'admin@gamelibrary.com',
|
|
||||||
avatar: '/avatars/default.jpg',
|
|
||||||
},
|
|
||||||
teams: [
|
|
||||||
{
|
|
||||||
name: 'Personal',
|
|
||||||
logo: Gamepad2,
|
|
||||||
plan: 'Standard',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Work',
|
|
||||||
logo: Database,
|
|
||||||
plan: 'Professional',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
navMain: [
|
|
||||||
{
|
|
||||||
title: 'Dashboard',
|
|
||||||
url: '/',
|
|
||||||
icon: Home,
|
|
||||||
isActive: true,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Games',
|
|
||||||
url: '/games',
|
|
||||||
icon: Gamepad2,
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: 'All Games',
|
|
||||||
url: '/games',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Favorites',
|
|
||||||
url: '/games/favorites',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Recently Played',
|
|
||||||
url: '/games/recent',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Collections',
|
|
||||||
url: '/collections',
|
|
||||||
icon: Star,
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
title: 'My Collections',
|
|
||||||
url: '/collections',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Shared Collections',
|
|
||||||
url: '/collections/shared',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Statistics',
|
|
||||||
url: '/stats',
|
|
||||||
icon: TrendingUp,
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'Settings',
|
|
||||||
url: '/settings',
|
|
||||||
icon: Settings,
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
||||||
function TeamSwitcher({
|
|
||||||
teams,
|
|
||||||
}: {
|
|
||||||
teams: {
|
|
||||||
name: string;
|
|
||||||
logo: React.ElementType;
|
|
||||||
plan: string;
|
|
||||||
}[];
|
|
||||||
}) {
|
|
||||||
const { isMobile } = useSidebar();
|
|
||||||
const [activeTeam, setActiveTeam] = React.useState(teams[0]);
|
|
||||||
|
|
||||||
if (!activeTeam) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarMenu>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<SidebarMenuButton
|
|
||||||
size="lg"
|
|
||||||
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
||||||
>
|
|
||||||
<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg">
|
|
||||||
<activeTeam.logo className="size-4" />
|
|
||||||
</div>
|
|
||||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
|
||||||
<span className="truncate font-medium">{activeTeam.name}</span>
|
|
||||||
<span className="truncate text-xs">{activeTeam.plan}</span>
|
|
||||||
</div>
|
|
||||||
<ChevronsUpDown className="ml-auto" />
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent
|
|
||||||
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
|
|
||||||
align="start"
|
|
||||||
side={isMobile ? 'bottom' : 'right'}
|
|
||||||
sideOffset={4}
|
|
||||||
>
|
|
||||||
<DropdownMenuGroup>
|
|
||||||
<DropdownMenuLabel className="text-muted-foreground text-xs">Teams</DropdownMenuLabel>
|
|
||||||
{teams.map((team) => (
|
|
||||||
<DropdownMenuItem
|
|
||||||
key={team.name}
|
|
||||||
onClick={() => setActiveTeam(team)}
|
|
||||||
className="cursor-pointer"
|
|
||||||
>
|
|
||||||
<div className="bg-sidebar-primary text-sidebar-primary-foreground flex aspect-square size-8 items-center justify-center rounded-lg mr-2">
|
|
||||||
<team.logo className="size-4" />
|
|
||||||
</div>
|
|
||||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
|
||||||
<span className="truncate font-medium">{team.name}</span>
|
|
||||||
<span className="truncate text-xs">{team.plan}</span>
|
|
||||||
</div>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
))}
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</SidebarMenu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function NavMain({
|
|
||||||
items,
|
|
||||||
}: {
|
|
||||||
items: {
|
|
||||||
title: string;
|
|
||||||
url: string;
|
|
||||||
icon?: React.ElementType;
|
|
||||||
isActive?: boolean;
|
|
||||||
items?: {
|
|
||||||
title: string;
|
|
||||||
url: string;
|
|
||||||
}[];
|
|
||||||
}[];
|
|
||||||
}) {
|
|
||||||
return (
|
|
||||||
<SidebarGroup>
|
|
||||||
<SidebarGroupLabel>Main Navigation</SidebarGroupLabel>
|
|
||||||
<SidebarMenu>
|
|
||||||
{items.map((item) => (
|
|
||||||
<Collapsible key={item.title} defaultOpen={item.isActive} className="group/collapsible">
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<CollapsibleTrigger render={<SidebarMenuButton tooltip={item.title} />}>
|
|
||||||
{item.icon && <item.icon />}
|
|
||||||
<span>{item.title}</span>
|
|
||||||
<ChevronRight className="ml-auto transition-transform duration-200 group-data-[state=open]/collapsible:rotate-90" />
|
|
||||||
</CollapsibleTrigger>
|
|
||||||
<CollapsibleContent>
|
|
||||||
<SidebarMenuSub>
|
|
||||||
{item.items?.map((subItem) => (
|
|
||||||
<SidebarMenuSubItem key={subItem.title}>
|
|
||||||
<SidebarMenuSubButton render={<a href={subItem.url} />}>
|
|
||||||
<span>{subItem.title}</span>
|
|
||||||
</SidebarMenuSubButton>
|
|
||||||
</SidebarMenuSubItem>
|
|
||||||
))}
|
|
||||||
</SidebarMenuSub>
|
|
||||||
</CollapsibleContent>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</Collapsible>
|
|
||||||
))}
|
|
||||||
</SidebarMenu>
|
|
||||||
</SidebarGroup>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
function NavUser({ user }: { user: { name: string; email: string; avatar: string } }) {
|
|
||||||
const { isMobile } = useSidebar();
|
|
||||||
|
|
||||||
return (
|
|
||||||
<SidebarMenu>
|
|
||||||
<SidebarMenuItem>
|
|
||||||
<DropdownMenu>
|
|
||||||
<DropdownMenuTrigger asChild>
|
|
||||||
<SidebarMenuButton
|
|
||||||
size="lg"
|
|
||||||
className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
|
|
||||||
>
|
|
||||||
<Avatar className="h-8 w-8 rounded-full">
|
|
||||||
<AvatarImage src={user.avatar} alt={user.name} />
|
|
||||||
<AvatarFallback>{user.name.charAt(0)}</AvatarFallback>
|
|
||||||
</Avatar>
|
|
||||||
<div className="grid flex-1 text-left text-sm leading-tight">
|
|
||||||
<span className="truncate font-medium">{user.name}</span>
|
|
||||||
<span className="truncate text-xs text-muted-foreground">{user.email}</span>
|
|
||||||
</div>
|
|
||||||
<ChevronsUpDown className="ml-auto size-4" />
|
|
||||||
</SidebarMenuButton>
|
|
||||||
</DropdownMenuTrigger>
|
|
||||||
<DropdownMenuContent
|
|
||||||
className="w-(--radix-dropdown-menu-trigger-width) min-w-56 rounded-lg"
|
|
||||||
align="start"
|
|
||||||
side={isMobile ? 'bottom' : 'right'}
|
|
||||||
sideOffset={4}
|
|
||||||
>
|
|
||||||
<DropdownMenuLabel className="text-muted-foreground text-xs">
|
|
||||||
Logged in as
|
|
||||||
</DropdownMenuLabel>
|
|
||||||
<DropdownMenuGroup>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<User className="mr-2 h-4 w-4" />
|
|
||||||
<span>Profile</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<Settings className="mr-2 h-4 w-4" />
|
|
||||||
<span>Settings</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuGroup>
|
|
||||||
<DropdownMenuSeparator />
|
|
||||||
<DropdownMenuItem>
|
|
||||||
<span>Log out</span>
|
|
||||||
</DropdownMenuItem>
|
|
||||||
</DropdownMenuContent>
|
|
||||||
</DropdownMenu>
|
|
||||||
</SidebarMenuItem>
|
|
||||||
</SidebarMenu>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function AppSidebar({ ...props }: React.ComponentProps<typeof Sidebar>) {
|
|
||||||
return (
|
|
||||||
<SidebarProvider>
|
|
||||||
<Sidebar collapsible="icon" {...props}>
|
|
||||||
<SidebarHeader>
|
|
||||||
<TeamSwitcher teams={data.teams} />
|
|
||||||
</SidebarHeader>
|
|
||||||
<SidebarContent>
|
|
||||||
<NavMain items={data.navMain} />
|
|
||||||
</SidebarContent>
|
|
||||||
<SidebarFooter>
|
|
||||||
<NavUser user={data.user} />
|
|
||||||
</SidebarFooter>
|
|
||||||
<SidebarRail />
|
|
||||||
</Sidebar>
|
|
||||||
<SidebarInset>
|
|
||||||
<header className="flex h-16 shrink-0 items-center gap-2 border-b bg-background px-4 transition-[width,height] ease-linear group-has-[collapsible=icon]/sidebar-wrapper:h-12">
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<SidebarTrigger className="-ml-1" />
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Gamepad2 className="h-6 w-6" />
|
|
||||||
<h1 className="text-lg font-semibold">Game Library</h1>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
</SidebarInset>
|
|
||||||
</SidebarProvider>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,69 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority';
|
|
||||||
import { AlertTriangle, CheckCircle, Info, XCircle } from 'lucide-react';
|
|
||||||
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
const alertVariants = cva(
|
|
||||||
'relative w-full rounded-lg border p-4 [&>svg]:absolute [&>svg]:-top-1 [&>svg]:-left-1 [&>svg]:h-4 [&>svg]:w-4 [&>svg]:text-foreground',
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default: 'bg-background text-foreground border',
|
|
||||||
destructive:
|
|
||||||
'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive',
|
|
||||||
success: 'border-green-500/50 text-green-700 dark:border-green-500 [&>svg]:text-green-700',
|
|
||||||
warning:
|
|
||||||
'border-yellow-500/50 text-yellow-700 dark:border-yellow-500 [&>svg]:text-yellow-700',
|
|
||||||
info: 'border-blue-500/50 text-blue-700 dark:border-blue-500 [&>svg]:text-blue-700',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: 'default',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
const Alert = React.forwardRef<
|
|
||||||
HTMLDivElement,
|
|
||||||
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
|
||||||
>(({ className, variant, ...props }, ref) => (
|
|
||||||
<div ref={ref} role="alert" className={cn(alertVariants({ variant }), className)} {...props} />
|
|
||||||
));
|
|
||||||
Alert.displayName = 'Alert';
|
|
||||||
|
|
||||||
const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
|
||||||
({ className, ...props }, ref) => (
|
|
||||||
<h5
|
|
||||||
ref={ref}
|
|
||||||
className={cn('mb-1 font-medium leading-none tracking-tight', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
AlertTitle.displayName = 'AlertTitle';
|
|
||||||
|
|
||||||
const AlertDescription = React.forwardRef<
|
|
||||||
HTMLParagraphElement,
|
|
||||||
React.HTMLAttributes<HTMLParagraphElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<div ref={ref} className={cn('text-sm [&_p]:leading-relaxed', className)} {...props} />
|
|
||||||
));
|
|
||||||
AlertDescription.displayName = 'AlertDescription';
|
|
||||||
|
|
||||||
const AlertIcon = ({ variant }: { variant?: VariantProps<typeof alertVariants>['variant'] }) => {
|
|
||||||
switch (variant) {
|
|
||||||
case 'destructive':
|
|
||||||
return <XCircle className="h-4 w-4" />;
|
|
||||||
case 'success':
|
|
||||||
return <CheckCircle className="h-4 w-4" />;
|
|
||||||
case 'warning':
|
|
||||||
return <AlertTriangle className="h-4 w-4" />;
|
|
||||||
case 'info':
|
|
||||||
return <Info className="h-4 w-4" />;
|
|
||||||
default:
|
|
||||||
return <Info className="h-4 w-4" />;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export { Alert, AlertTitle, AlertDescription, AlertIcon };
|
|
||||||
@@ -1,31 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority';
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
const badgeVariants = cva(
|
|
||||||
'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
|
|
||||||
{
|
|
||||||
variants: {
|
|
||||||
variant: {
|
|
||||||
default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
|
|
||||||
secondary:
|
|
||||||
'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
|
||||||
destructive:
|
|
||||||
'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
|
|
||||||
outline: 'text-foreground',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
defaultVariants: {
|
|
||||||
variant: 'default',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
);
|
|
||||||
|
|
||||||
export interface BadgeProps
|
|
||||||
extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}
|
|
||||||
|
|
||||||
function Badge({ className, variant, ...props }: BadgeProps) {
|
|
||||||
return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
|
|
||||||
}
|
|
||||||
|
|
||||||
export { Badge, badgeVariants };
|
|
||||||
@@ -1,47 +1,64 @@
|
|||||||
import * as React from 'react';
|
import * as React from "react"
|
||||||
import { Slot } from '@radix-ui/react-slot';
|
import { cva, type VariantProps } from "class-variance-authority"
|
||||||
import { cva, type VariantProps } from 'class-variance-authority';
|
import { Slot } from "radix-ui"
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const buttonVariants = cva(
|
const buttonVariants = cva(
|
||||||
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
{
|
{
|
||||||
variants: {
|
variants: {
|
||||||
variant: {
|
variant: {
|
||||||
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
|
default: "bg-primary text-primary-foreground hover:bg-primary/90",
|
||||||
destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
|
destructive:
|
||||||
outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
|
"bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
||||||
secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
|
outline:
|
||||||
ghost: 'hover:bg-accent hover:text-accent-foreground',
|
"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
|
||||||
link: 'text-primary underline-offset-4 hover:underline',
|
secondary:
|
||||||
|
"bg-secondary text-secondary-foreground hover:bg-secondary/80",
|
||||||
|
ghost:
|
||||||
|
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
|
||||||
|
link: "text-primary underline-offset-4 hover:underline",
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
default: 'h-10 px-4 py-2',
|
default: "h-9 px-4 py-2 has-[>svg]:px-3",
|
||||||
sm: 'h-9 rounded-md px-3',
|
xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
|
||||||
lg: 'h-11 rounded-md px-8',
|
sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
|
||||||
icon: 'h-10 w-10',
|
lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
|
||||||
|
icon: "size-9",
|
||||||
|
"icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
|
||||||
|
"icon-sm": "size-8",
|
||||||
|
"icon-lg": "size-10",
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
defaultVariants: {
|
defaultVariants: {
|
||||||
variant: 'default',
|
variant: "default",
|
||||||
size: 'default',
|
size: "default",
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
);
|
)
|
||||||
|
|
||||||
export interface ButtonProps
|
function Button({
|
||||||
extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
|
className,
|
||||||
asChild?: boolean;
|
variant = "default",
|
||||||
}
|
size = "default",
|
||||||
|
asChild = false,
|
||||||
|
...props
|
||||||
|
}: React.ComponentProps<"button"> &
|
||||||
|
VariantProps<typeof buttonVariants> & {
|
||||||
|
asChild?: boolean
|
||||||
|
}) {
|
||||||
|
const Comp = asChild ? Slot.Root : "button"
|
||||||
|
|
||||||
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
|
|
||||||
({ className, variant, size, asChild = false, ...props }, ref) => {
|
|
||||||
const Comp = asChild ? Slot : 'button';
|
|
||||||
return (
|
return (
|
||||||
<Comp className={cn(buttonVariants({ variant, size, className }))} ref={ref} {...props} />
|
<Comp
|
||||||
);
|
data-slot="button"
|
||||||
|
data-variant={variant}
|
||||||
|
data-size={size}
|
||||||
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
);
|
|
||||||
Button.displayName = 'Button';
|
|
||||||
|
|
||||||
export { Button, buttonVariants };
|
export { Button, buttonVariants }
|
||||||
|
|||||||
@@ -1,55 +1,92 @@
|
|||||||
import * as React from 'react';
|
import * as React from "react"
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
import { cn } from "@/lib/utils"
|
||||||
({ className, ...props }, ref) => (
|
|
||||||
|
function Card({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
<div
|
<div
|
||||||
ref={ref}
|
data-slot="card"
|
||||||
className={cn('rounded-lg border bg-card text-card-foreground shadow-sm', className)}
|
className={cn(
|
||||||
|
"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
|
||||||
|
className
|
||||||
|
)}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
);
|
}
|
||||||
Card.displayName = 'Card';
|
|
||||||
|
|
||||||
const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
({ className, ...props }, ref) => (
|
return (
|
||||||
<div ref={ref} className={cn('flex flex-col space-y-1.5 p-6', className)} {...props} />
|
<div
|
||||||
)
|
data-slot="card-header"
|
||||||
);
|
className={cn(
|
||||||
CardHeader.displayName = 'CardHeader';
|
"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
|
||||||
|
className
|
||||||
const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
)}
|
||||||
({ className, ...props }, ref) => (
|
|
||||||
<h3
|
|
||||||
ref={ref}
|
|
||||||
className={cn('text-2xl font-semibold leading-none tracking-tight', className)}
|
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
);
|
}
|
||||||
CardTitle.displayName = 'CardTitle';
|
|
||||||
|
|
||||||
const CardDescription = React.forwardRef<
|
function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
HTMLParagraphElement,
|
return (
|
||||||
React.HTMLAttributes<HTMLParagraphElement>
|
<div
|
||||||
>(({ className, ...props }, ref) => (
|
data-slot="card-title"
|
||||||
<p ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
|
className={cn("leading-none font-semibold", className)}
|
||||||
));
|
{...props}
|
||||||
CardDescription.displayName = 'CardDescription';
|
/>
|
||||||
|
|
||||||
const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
|
||||||
({ className, ...props }, ref) => (
|
|
||||||
<div ref={ref} className={cn('p-6 pt-0', className)} {...props} />
|
|
||||||
)
|
)
|
||||||
);
|
}
|
||||||
CardContent.displayName = 'CardContent';
|
|
||||||
|
|
||||||
const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
|
function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
({ className, ...props }, ref) => (
|
return (
|
||||||
<div ref={ref} className={cn('flex items-center p-6 pt-0', className)} {...props} />
|
<div
|
||||||
|
data-slot="card-description"
|
||||||
|
className={cn("text-muted-foreground text-sm", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
)
|
)
|
||||||
);
|
}
|
||||||
CardFooter.displayName = 'CardFooter';
|
|
||||||
|
|
||||||
export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
|
function CardAction({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-action"
|
||||||
|
className={cn(
|
||||||
|
"col-start-2 row-span-2 row-start-1 self-start justify-self-end",
|
||||||
|
className
|
||||||
|
)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardContent({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-content"
|
||||||
|
className={cn("px-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
data-slot="card-footer"
|
||||||
|
className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
|
||||||
|
{...props}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
Card,
|
||||||
|
CardHeader,
|
||||||
|
CardFooter,
|
||||||
|
CardTitle,
|
||||||
|
CardAction,
|
||||||
|
CardDescription,
|
||||||
|
CardContent,
|
||||||
|
}
|
||||||
|
|||||||
@@ -1,26 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
|
|
||||||
import { Check } from 'lucide-react';
|
|
||||||
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
const Checkbox = React.forwardRef<
|
|
||||||
React.ElementRef<typeof CheckboxPrimitive.Root>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<CheckboxPrimitive.Root
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
'peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<CheckboxPrimitive.Indicator className={cn('flex items-center justify-center text-current')}>
|
|
||||||
<Check className="h-4 w-4" />
|
|
||||||
</CheckboxPrimitive.Indicator>
|
|
||||||
</CheckboxPrimitive.Root>
|
|
||||||
));
|
|
||||||
Checkbox.displayName = CheckboxPrimitive.Root.displayName;
|
|
||||||
|
|
||||||
export { Checkbox };
|
|
||||||
@@ -1,23 +1,21 @@
|
|||||||
import * as React from 'react';
|
import * as React from "react"
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {}
|
import { cn } from "@/lib/utils"
|
||||||
|
|
||||||
const Input = React.forwardRef<HTMLInputElement, InputProps>(
|
function Input({ className, type, ...props }: React.ComponentProps<"input">) {
|
||||||
({ className, type, ...props }, ref) => {
|
|
||||||
return (
|
return (
|
||||||
<input
|
<input
|
||||||
type={type}
|
type={type}
|
||||||
|
data-slot="input"
|
||||||
className={cn(
|
className={cn(
|
||||||
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
"file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
|
||||||
|
"focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
|
||||||
|
"aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
||||||
className
|
className
|
||||||
)}
|
)}
|
||||||
ref={ref}
|
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
)
|
||||||
}
|
}
|
||||||
);
|
|
||||||
Input.displayName = 'Input';
|
|
||||||
|
|
||||||
export { Input };
|
export { Input }
|
||||||
|
|||||||
@@ -1,19 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import * as LabelPrimitive from '@radix-ui/react-label';
|
|
||||||
import { cva, type VariantProps } from 'class-variance-authority';
|
|
||||||
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
const labelVariants = cva(
|
|
||||||
'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70'
|
|
||||||
);
|
|
||||||
|
|
||||||
const Label = React.forwardRef<
|
|
||||||
React.ElementRef<typeof LabelPrimitive.Root>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> & VariantProps<typeof labelVariants>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
|
|
||||||
));
|
|
||||||
Label.displayName = LabelPrimitive.Root.displayName;
|
|
||||||
|
|
||||||
export { Label };
|
|
||||||
@@ -1,44 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
|
|
||||||
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
const ScrollArea = React.forwardRef<
|
|
||||||
React.ElementRef<typeof ScrollAreaPrimitive.Root>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
|
|
||||||
>(({ className, children, ...props }, ref) => (
|
|
||||||
<ScrollAreaPrimitive.Root
|
|
||||||
ref={ref}
|
|
||||||
className={cn('relative overflow-hidden', className)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
|
|
||||||
{children}
|
|
||||||
</ScrollAreaPrimitive.Viewport>
|
|
||||||
<ScrollBar />
|
|
||||||
<ScrollAreaPrimitive.Corner />
|
|
||||||
</ScrollAreaPrimitive.Root>
|
|
||||||
));
|
|
||||||
ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
|
|
||||||
|
|
||||||
const ScrollBar = React.forwardRef<
|
|
||||||
React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
|
|
||||||
>(({ className, orientation = 'vertical', ...props }, ref) => (
|
|
||||||
<ScrollAreaPrimitive.ScrollAreaScrollbar
|
|
||||||
ref={ref}
|
|
||||||
orientation={orientation}
|
|
||||||
className={cn(
|
|
||||||
'flex touch-none select-none transition-colors',
|
|
||||||
orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-[1px]',
|
|
||||||
orientation === 'horizontal' && 'h-2.5 w-full border-t border-t-transparent p-[1px]',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
|
|
||||||
</ScrollAreaPrimitive.ScrollAreaScrollbar>
|
|
||||||
));
|
|
||||||
ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
|
|
||||||
|
|
||||||
export { ScrollArea, ScrollBar };
|
|
||||||
@@ -1,151 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
import * as SelectPrimitive from '@radix-ui/react-select';
|
|
||||||
import { Check, ChevronDown, ChevronUp } from 'lucide-react';
|
|
||||||
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
const Select = SelectPrimitive.Root;
|
|
||||||
|
|
||||||
const SelectGroup = SelectPrimitive.Group;
|
|
||||||
|
|
||||||
const SelectValue = SelectPrimitive.Value;
|
|
||||||
|
|
||||||
const SelectTrigger = React.forwardRef<
|
|
||||||
React.ElementRef<typeof SelectPrimitive.Trigger>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
|
|
||||||
>(({ className, children, ...props }, ref) => (
|
|
||||||
<SelectPrimitive.Trigger
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
<SelectPrimitive.Icon asChild>
|
|
||||||
<ChevronDown className="h-4 w-4 opacity-50" />
|
|
||||||
</SelectPrimitive.Icon>
|
|
||||||
</SelectPrimitive.Trigger>
|
|
||||||
));
|
|
||||||
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
|
|
||||||
|
|
||||||
const SelectScrollUpButton = React.forwardRef<
|
|
||||||
React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<SelectPrimitive.ScrollUpButton
|
|
||||||
ref={ref}
|
|
||||||
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<ChevronUp className="h-4 w-4" />
|
|
||||||
</SelectPrimitive.ScrollUpButton>
|
|
||||||
));
|
|
||||||
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
|
|
||||||
|
|
||||||
const SelectScrollDownButton = React.forwardRef<
|
|
||||||
React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<SelectPrimitive.ScrollDownButton
|
|
||||||
ref={ref}
|
|
||||||
className={cn('flex cursor-default items-center justify-center py-1', className)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<ChevronDown className="h-4 w-4" />
|
|
||||||
</SelectPrimitive.ScrollDownButton>
|
|
||||||
));
|
|
||||||
SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
|
|
||||||
|
|
||||||
const SelectContent = React.forwardRef<
|
|
||||||
React.ElementRef<typeof SelectPrimitive.Content>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
|
|
||||||
>(({ className, children, position = 'popper', ...props }, ref) => (
|
|
||||||
<SelectPrimitive.Portal>
|
|
||||||
<SelectPrimitive.Content
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
|
|
||||||
position === 'popper' &&
|
|
||||||
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
position={position}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<SelectScrollUpButton />
|
|
||||||
<SelectPrimitive.Viewport
|
|
||||||
className={cn(
|
|
||||||
'p-1',
|
|
||||||
position === 'popper' &&
|
|
||||||
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
|
|
||||||
)}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</SelectPrimitive.Viewport>
|
|
||||||
<SelectScrollDownButton />
|
|
||||||
</SelectPrimitive.Content>
|
|
||||||
</SelectPrimitive.Portal>
|
|
||||||
));
|
|
||||||
SelectContent.displayName = SelectPrimitive.Content.displayName;
|
|
||||||
|
|
||||||
const SelectLabel = React.forwardRef<
|
|
||||||
React.ElementRef<typeof SelectPrimitive.Label>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<SelectPrimitive.Label
|
|
||||||
ref={ref}
|
|
||||||
className={cn('py-1.5 pl-8 pr-2 text-sm font-semibold', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
SelectLabel.displayName = SelectPrimitive.Label.displayName;
|
|
||||||
|
|
||||||
const SelectItem = React.forwardRef<
|
|
||||||
React.ElementRef<typeof SelectPrimitive.Item>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
|
|
||||||
>(({ className, children, ...props }, ref) => (
|
|
||||||
<SelectPrimitive.Item
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
|
||||||
<SelectPrimitive.ItemIndicator>
|
|
||||||
<Check className="h-4 w-4" />
|
|
||||||
</SelectPrimitive.ItemIndicator>
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
|
||||||
</SelectPrimitive.Item>
|
|
||||||
));
|
|
||||||
SelectItem.displayName = SelectPrimitive.Item.displayName;
|
|
||||||
|
|
||||||
const SelectSeparator = React.forwardRef<
|
|
||||||
React.ElementRef<typeof SelectPrimitive.Separator>,
|
|
||||||
React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<SelectPrimitive.Separator
|
|
||||||
ref={ref}
|
|
||||||
className={cn('-mx-1 my-1 h-px bg-muted', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
|
|
||||||
|
|
||||||
export {
|
|
||||||
Select,
|
|
||||||
SelectGroup,
|
|
||||||
SelectValue,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectContent,
|
|
||||||
SelectLabel,
|
|
||||||
SelectItem,
|
|
||||||
SelectSeparator,
|
|
||||||
SelectScrollUpButton,
|
|
||||||
SelectScrollDownButton,
|
|
||||||
};
|
|
||||||
@@ -1,91 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
|
|
||||||
({ className, ...props }, ref) => (
|
|
||||||
<div className="relative w-full overflow-auto">
|
|
||||||
<table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
Table.displayName = 'Table';
|
|
||||||
|
|
||||||
const TableHeader = React.forwardRef<
|
|
||||||
HTMLTableSectionElement,
|
|
||||||
React.HTMLAttributes<HTMLTableSectionElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
|
|
||||||
));
|
|
||||||
TableHeader.displayName = 'TableHeader';
|
|
||||||
|
|
||||||
const TableBody = React.forwardRef<
|
|
||||||
HTMLTableSectionElement,
|
|
||||||
React.HTMLAttributes<HTMLTableSectionElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />
|
|
||||||
));
|
|
||||||
TableBody.displayName = 'TableBody';
|
|
||||||
|
|
||||||
const TableFooter = React.forwardRef<
|
|
||||||
HTMLTableSectionElement,
|
|
||||||
React.HTMLAttributes<HTMLTableSectionElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<tfoot
|
|
||||||
ref={ref}
|
|
||||||
className={cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
TableFooter.displayName = 'TableFooter';
|
|
||||||
|
|
||||||
const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
|
|
||||||
({ className, ...props }, ref) => (
|
|
||||||
<tr
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
);
|
|
||||||
TableRow.displayName = 'TableRow';
|
|
||||||
|
|
||||||
const TableHead = React.forwardRef<
|
|
||||||
HTMLTableCellElement,
|
|
||||||
React.ThHTMLAttributes<HTMLTableCellElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<th
|
|
||||||
ref={ref}
|
|
||||||
className={cn(
|
|
||||||
'h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
TableHead.displayName = 'TableHead';
|
|
||||||
|
|
||||||
const TableCell = React.forwardRef<
|
|
||||||
HTMLTableCellElement,
|
|
||||||
React.TdHTMLAttributes<HTMLTableCellElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<td
|
|
||||||
ref={ref}
|
|
||||||
className={cn('p-4 align-middle [&:has([role=checkbox])]:pr-0', className)}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
));
|
|
||||||
TableCell.displayName = 'TableCell';
|
|
||||||
|
|
||||||
const TableCaption = React.forwardRef<
|
|
||||||
HTMLTableCaptionElement,
|
|
||||||
React.HTMLAttributes<HTMLTableCaptionElement>
|
|
||||||
>(({ className, ...props }, ref) => (
|
|
||||||
<caption ref={ref} className={cn('mt-4 text-sm text-muted-foreground', className)} {...props} />
|
|
||||||
));
|
|
||||||
TableCaption.displayName = 'TableCaption';
|
|
||||||
|
|
||||||
export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import * as React from 'react';
|
|
||||||
|
|
||||||
import { cn } from '@/lib/utils';
|
|
||||||
|
|
||||||
export interface TextareaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
|
|
||||||
|
|
||||||
const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
|
|
||||||
({ className, ...props }, ref) => {
|
|
||||||
return (
|
|
||||||
<textarea
|
|
||||||
className={cn(
|
|
||||||
'flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
|
|
||||||
className
|
|
||||||
)}
|
|
||||||
ref={ref}
|
|
||||||
{...props}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
);
|
|
||||||
Textarea.displayName = 'Textarea';
|
|
||||||
|
|
||||||
export { Textarea };
|
|
||||||
@@ -1,98 +0,0 @@
|
|||||||
import { z } from 'zod';
|
|
||||||
|
|
||||||
// Esquemas de validación comunes
|
|
||||||
export const commonSchemas = {
|
|
||||||
// Validación de strings
|
|
||||||
string: (min = 1, max = 255) =>
|
|
||||||
z.string().min(min, 'Este campo es requerido').max(max, 'Máximo 255 caracteres'),
|
|
||||||
|
|
||||||
// Validación de emails
|
|
||||||
email: z.string().email('Por favor ingresa un email válido').min(1, 'Este campo es requerido'),
|
|
||||||
|
|
||||||
// Validación de números
|
|
||||||
number: (min = 0, max = Number.MAX_SAFE_INTEGER) =>
|
|
||||||
z.number().min(min, 'Debe ser un número positivo').max(max, 'Número demasiado grande'),
|
|
||||||
|
|
||||||
// Validación de fechas
|
|
||||||
date: z
|
|
||||||
.date()
|
|
||||||
.refine(
|
|
||||||
(date) => date instanceof Date && !isNaN(date.getTime()),
|
|
||||||
'Por favor ingresa una fecha válida'
|
|
||||||
),
|
|
||||||
|
|
||||||
// Validación de booleanos
|
|
||||||
boolean: z.boolean(),
|
|
||||||
|
|
||||||
// Validación de arrays
|
|
||||||
array: (min = 1, max = 100) =>
|
|
||||||
z
|
|
||||||
.array(z.unknown())
|
|
||||||
.min(min, 'Al menos un elemento requerido')
|
|
||||||
.max(max, 'Máximo 100 elementos'),
|
|
||||||
};
|
|
||||||
|
|
||||||
// Función para manejar errores de formulario
|
|
||||||
export function getFieldError(
|
|
||||||
fieldErrors: Record<string, string[]>,
|
|
||||||
fieldName: string
|
|
||||||
): string | undefined {
|
|
||||||
const errors = fieldErrors[fieldName];
|
|
||||||
return errors?.[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Función para manejar errores de formulario global
|
|
||||||
export function getGlobalError(fieldErrors: Record<string, string[]>): string | undefined {
|
|
||||||
const globalErrors = Object.values(fieldErrors).flat();
|
|
||||||
return globalErrors?.[0];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Esquemas específicos para la aplicación
|
|
||||||
export const appSchemas = {
|
|
||||||
// Esquema para crear/editar juegos
|
|
||||||
gameSchema: z.object({
|
|
||||||
title: commonSchemas.string(1, 100),
|
|
||||||
description: commonSchemas.string(0, 2000),
|
|
||||||
platformId: commonSchemas.number(1, Number.MAX_SAFE_INTEGER),
|
|
||||||
releaseYear: commonSchemas.number(1900, new Date().getFullYear() + 5),
|
|
||||||
rating: z.number().min(0).max(10).optional(),
|
|
||||||
tags: commonSchemas.array(0, 50).optional(),
|
|
||||||
romFile: z.string().optional(),
|
|
||||||
metadataSource: z.enum(['igdb', 'rawg', 'thegamesdb', 'manual']).optional(),
|
|
||||||
}),
|
|
||||||
|
|
||||||
// Esquema para importar ROMs
|
|
||||||
importRomSchema: z.object({
|
|
||||||
romPath: commonSchemas.string(1, 500),
|
|
||||||
platformId: commonSchemas.number(1, Number.MAX_SAFE_INTEGER),
|
|
||||||
autoScan: z.boolean().default(true),
|
|
||||||
}),
|
|
||||||
|
|
||||||
// Esquema para configuración
|
|
||||||
settingsSchema: z.object({
|
|
||||||
igdbApiKey: commonSchemas.string(0, 100).optional(),
|
|
||||||
rawgApiKey: commonSchemas.string(0, 100).optional(),
|
|
||||||
thegamesdbApiKey: commonSchemas.string(0, 100).optional(),
|
|
||||||
defaultRomDirectory: commonSchemas.string(0, 500).optional(),
|
|
||||||
autoImportEnabled: z.boolean().default(true),
|
|
||||||
metadataSourcePriority: z
|
|
||||||
.array(z.enum(['igdb', 'rawg', 'thegamesdb']))
|
|
||||||
.default(['igdb', 'rawg', 'thegamesdb']),
|
|
||||||
}),
|
|
||||||
|
|
||||||
// Esquema para plataformas
|
|
||||||
platformSchema: z.object({
|
|
||||||
name: commonSchemas.string(1, 50),
|
|
||||||
description: commonSchemas.string(0, 500),
|
|
||||||
manufacturer: commonSchemas.string(0, 100),
|
|
||||||
releaseYear: commonSchemas.number(1900, new Date().getFullYear() + 5),
|
|
||||||
romExtension: z.string().optional(),
|
|
||||||
}),
|
|
||||||
|
|
||||||
// Esquema para etiquetas
|
|
||||||
tagSchema: z.object({
|
|
||||||
name: commonSchemas.string(1, 30),
|
|
||||||
color: z.string().regex(/^#[0-9A-F]{6}$/i, 'Color inválido. Use formato #RRGGBB'),
|
|
||||||
description: commonSchemas.string(0, 200),
|
|
||||||
}),
|
|
||||||
};
|
|
||||||
@@ -1,68 +0,0 @@
|
|||||||
:root {
|
|
||||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
|
||||||
line-height: 1.5;
|
|
||||||
font-weight: 400;
|
|
||||||
|
|
||||||
color-scheme: light dark;
|
|
||||||
color: rgba(255, 255, 255, 0.87);
|
|
||||||
background-color: #242424;
|
|
||||||
|
|
||||||
font-synthesis: none;
|
|
||||||
text-rendering: optimizeLegibility;
|
|
||||||
-webkit-font-smoothing: antialiased;
|
|
||||||
-moz-osx-font-smoothing: grayscale;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
font-weight: 500;
|
|
||||||
color: #646cff;
|
|
||||||
text-decoration: inherit;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #535bf2;
|
|
||||||
}
|
|
||||||
|
|
||||||
body {
|
|
||||||
margin: 0;
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
min-width: 320px;
|
|
||||||
min-height: 100vh;
|
|
||||||
}
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 3.2em;
|
|
||||||
line-height: 1.1;
|
|
||||||
}
|
|
||||||
|
|
||||||
button {
|
|
||||||
border-radius: 8px;
|
|
||||||
border: 1px solid transparent;
|
|
||||||
padding: 0.6em 1.2em;
|
|
||||||
font-size: 1em;
|
|
||||||
font-weight: 500;
|
|
||||||
font-family: inherit;
|
|
||||||
background-color: #1a1a1a;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: border-color 0.25s;
|
|
||||||
}
|
|
||||||
button:hover {
|
|
||||||
border-color: #646cff;
|
|
||||||
}
|
|
||||||
button:focus,
|
|
||||||
button:focus-visible {
|
|
||||||
outline: 4px auto -webkit-focus-ring-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (prefers-color-scheme: light) {
|
|
||||||
:root {
|
|
||||||
color: #213547;
|
|
||||||
background-color: #ffffff;
|
|
||||||
}
|
|
||||||
a:hover {
|
|
||||||
color: #747bff;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
background-color: #f9f9f9;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import { type ClassValue, clsx } from 'clsx';
|
import { clsx, type ClassValue } from "clsx"
|
||||||
import { twMerge } from 'tailwind-merge';
|
import { twMerge } from "tailwind-merge"
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
export function cn(...inputs: ClassValue[]) {
|
||||||
return twMerge(clsx(inputs));
|
return twMerge(clsx(inputs))
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,10 +0,0 @@
|
|||||||
import { StrictMode } from 'react';
|
|
||||||
import { createRoot } from 'react-dom/client';
|
|
||||||
import './styles/globals.css';
|
|
||||||
import App from './App.tsx';
|
|
||||||
|
|
||||||
createRoot(document.getElementById('root')!).render(
|
|
||||||
<StrictMode>
|
|
||||||
<App />
|
|
||||||
</StrictMode>
|
|
||||||
);
|
|
||||||
@@ -1,232 +0,0 @@
|
|||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import {
|
|
||||||
Gamepad2,
|
|
||||||
Database,
|
|
||||||
Tag,
|
|
||||||
Download,
|
|
||||||
Upload,
|
|
||||||
TrendingUp,
|
|
||||||
Clock,
|
|
||||||
AlertCircle,
|
|
||||||
} from 'lucide-react';
|
|
||||||
|
|
||||||
// Datos simulados para el dashboard
|
|
||||||
const stats = {
|
|
||||||
totalGames: 156,
|
|
||||||
gamesWithRom: 128,
|
|
||||||
gamesWithoutRom: 28,
|
|
||||||
gamesWithMetadata: 142,
|
|
||||||
gamesWithoutMetadata: 14,
|
|
||||||
totalPlatforms: 12,
|
|
||||||
totalTags: 45,
|
|
||||||
averageRating: 7.8,
|
|
||||||
};
|
|
||||||
|
|
||||||
const recentGames = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: 'The Legend of Zelda: Breath of the Wild',
|
|
||||||
platform: 'Nintendo Switch',
|
|
||||||
rating: 9.5,
|
|
||||||
addedDate: '2024-01-10',
|
|
||||||
},
|
|
||||||
{ id: 2, title: 'God of War', platform: 'PlayStation 4', rating: 9.2, addedDate: '2024-01-09' },
|
|
||||||
{ id: 3, title: 'Cyberpunk 2077', platform: 'PC', rating: 8.7, addedDate: '2024-01-08' },
|
|
||||||
{
|
|
||||||
id: 4,
|
|
||||||
title: 'Super Mario Odyssey',
|
|
||||||
platform: 'Nintendo Switch',
|
|
||||||
rating: 9.0,
|
|
||||||
addedDate: '2024-01-07',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 5,
|
|
||||||
title: 'Red Dead Redemption 2',
|
|
||||||
platform: 'PlayStation 4',
|
|
||||||
rating: 9.3,
|
|
||||||
addedDate: '2024-01-06',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const pendingTasks = [
|
|
||||||
{ id: 1, title: 'Enriquecer metadata para 14 juegos', priority: 'high', type: 'metadata' },
|
|
||||||
{ id: 2, title: 'Importar 28 ROMs detectadas', priority: 'medium', type: 'import' },
|
|
||||||
{ id: 3, title: 'Actualizar información de 5 juegos', priority: 'low', type: 'update' },
|
|
||||||
];
|
|
||||||
|
|
||||||
export function DashboardPage() {
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Encabezado */}
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold tracking-tight">Dashboard</h1>
|
|
||||||
<p className="text-muted-foreground">Resumen general de tu colección de videojuegos</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Estadísticas principales */}
|
|
||||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
||||||
<CardTitle className="text-sm font-medium">Total de Juegos</CardTitle>
|
|
||||||
<Gamepad2 className="h-4 w-4 text-muted-foreground" />
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="text-2xl font-bold">{stats.totalGames}</div>
|
|
||||||
<p className="text-xs text-muted-foreground">+12% desde el mes pasado</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
||||||
<CardTitle className="text-sm font-medium">Juegos con ROM</CardTitle>
|
|
||||||
<Download className="h-4 w-4 text-muted-foreground" />
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="text-2xl font-bold">{stats.gamesWithRom}</div>
|
|
||||||
<p className="text-xs text-muted-foreground">de {stats.totalGames} juegos</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
||||||
<CardTitle className="text-sm font-medium">Juegos con Metadata</CardTitle>
|
|
||||||
<Database className="h-4 w-4 text-muted-foreground" />
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="text-2xl font-bold">{stats.gamesWithMetadata}</div>
|
|
||||||
<p className="text-xs text-muted-foreground">{stats.gamesWithoutMetadata} pendientes</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
<Card>
|
|
||||||
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
|
|
||||||
<CardTitle className="text-sm font-medium">Plataformas</CardTitle>
|
|
||||||
<Tag className="h-4 w-4 text-muted-foreground" />
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="text-2xl font-bold">{stats.totalPlatforms}</div>
|
|
||||||
<p className="text-xs text-muted-foreground">{stats.totalTags} etiquetas</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-6 md:grid-cols-2">
|
|
||||||
{/* Tareas pendientes */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Tareas Pendientes</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
Acciones necesarias para mantener tu colección actualizada
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{pendingTasks.map((task) => (
|
|
||||||
<div key={task.id} className="flex items-center space-x-3">
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
{task.priority === 'high' && <AlertCircle className="h-5 w-5 text-red-500" />}
|
|
||||||
{task.priority === 'medium' && <Clock className="h-5 w-5 text-yellow-500" />}
|
|
||||||
{task.priority === 'low' && <TrendingUp className="h-5 w-5 text-green-500" />}
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-sm font-medium text-gray-900 truncate">{task.title}</p>
|
|
||||||
<div className="flex items-center space-x-2 mt-1">
|
|
||||||
<Badge variant="secondary" className="text-xs">
|
|
||||||
{task.type}
|
|
||||||
</Badge>
|
|
||||||
<Badge
|
|
||||||
variant={
|
|
||||||
task.priority === 'high'
|
|
||||||
? 'destructive'
|
|
||||||
: task.priority === 'medium'
|
|
||||||
? 'default'
|
|
||||||
: 'secondary'
|
|
||||||
}
|
|
||||||
className="text-xs"
|
|
||||||
>
|
|
||||||
{task.priority}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<Button size="sm" variant="outline">
|
|
||||||
Ver
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="mt-4 pt-4 border-t">
|
|
||||||
<Button className="w-full" variant="outline">
|
|
||||||
Ver todas las tareas
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Juegos recientes */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Juegos Recientes</CardTitle>
|
|
||||||
<CardDescription>Últimos juegos añadidos a tu colección</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="space-y-4">
|
|
||||||
{recentGames.map((game) => (
|
|
||||||
<div key={game.id} className="flex items-center space-x-3">
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<div className="h-10 w-10 bg-gray-200 rounded-md flex items-center justify-center">
|
|
||||||
<Gamepad2 className="h-6 w-6 text-gray-400" />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex-1 min-w-0">
|
|
||||||
<p className="text-sm font-medium text-gray-900 truncate">{game.title}</p>
|
|
||||||
<div className="flex items-center space-x-2 mt-1">
|
|
||||||
<Badge variant="outline" className="text-xs">
|
|
||||||
{game.platform}
|
|
||||||
</Badge>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<span className="text-sm text-gray-500">★</span>
|
|
||||||
<span className="text-sm font-medium ml-1">{game.rating}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-500">{game.addedDate}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className="mt-4 pt-4 border-t">
|
|
||||||
<Button className="w-full" variant="outline">
|
|
||||||
Ver todos los juegos
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Acciones rápidas */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Acciones Rápidas</CardTitle>
|
|
||||||
<CardDescription>Acciones comunes para gestionar tu colección</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="grid gap-4 md:grid-cols-3">
|
|
||||||
<Button className="h-auto p-4 flex flex-col items-center space-y-2" variant="outline">
|
|
||||||
<Download className="h-6 w-6" />
|
|
||||||
<span>Importar ROMs</span>
|
|
||||||
</Button>
|
|
||||||
<Button className="h-auto p-4 flex flex-col items-center space-y-2" variant="outline">
|
|
||||||
<Upload className="h-6 w-6" />
|
|
||||||
<span>Exportar Datos</span>
|
|
||||||
</Button>
|
|
||||||
<Button className="h-auto p-4 flex flex-col items-center space-y-2" variant="outline">
|
|
||||||
<Database className="h-6 w-6" />
|
|
||||||
<span>Gestionar Plataformas</span>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,350 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import { useNavigate, useParams } from '@tanstack/react-router';
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from '@/components/ui/table';
|
|
||||||
import { Label } from '@/components/ui/label';
|
|
||||||
import { Alert, AlertDescription } from '@/components/ui/alert';
|
|
||||||
import {
|
|
||||||
ArrowLeft,
|
|
||||||
Edit,
|
|
||||||
Trash2,
|
|
||||||
Download,
|
|
||||||
Star,
|
|
||||||
Calendar,
|
|
||||||
HardDrive,
|
|
||||||
Tag,
|
|
||||||
ExternalLink,
|
|
||||||
Info,
|
|
||||||
AlertCircle,
|
|
||||||
} from 'lucide-react';
|
|
||||||
import { Game } from '@/types';
|
|
||||||
|
|
||||||
// Datos simulados para el detalle del juego
|
|
||||||
const mockGame: Game = {
|
|
||||||
id: 1,
|
|
||||||
title: 'The Legend of Zelda: Breath of the Wild',
|
|
||||||
description:
|
|
||||||
'The Legend of Zelda: Breath of the Wild es un juego de acción-aventura desarrollado y publicado por Nintendo para la consola Nintendo Switch y la consola Wii U. Es el decimonoveno juego principal de la serie The Legend of Zelda y fue lanzado mundialmente en marzo de 2017. El juego presenta un mundo abierto con un diseño de física y química avanzado que permite a los jugadores resolver problemas de man creativas.',
|
|
||||||
platformId: 1,
|
|
||||||
platform: {
|
|
||||||
id: 1,
|
|
||||||
name: 'Nintendo Switch',
|
|
||||||
description: 'Consola híbrida de Nintendo',
|
|
||||||
manufacturer: 'Nintendo',
|
|
||||||
releaseYear: 2017,
|
|
||||||
romExtension: 'nsp',
|
|
||||||
},
|
|
||||||
releaseYear: 2017,
|
|
||||||
rating: 9.5,
|
|
||||||
tags: [
|
|
||||||
{ id: 1, name: 'Aventura', color: '#3B82F6', description: 'Juegos de aventura' },
|
|
||||||
{ id: 2, name: 'Acción', color: '#EF4444', description: 'Juegos de acción' },
|
|
||||||
{ id: 3, name: 'Open World', color: '#10B981', description: 'Mundo abierto' },
|
|
||||||
],
|
|
||||||
romFile: {
|
|
||||||
id: 1,
|
|
||||||
filename: 'zelda_botw.nsp',
|
|
||||||
path: '/roms/nintendo-switch',
|
|
||||||
size: 14485760,
|
|
||||||
checksum: 'abc123def456',
|
|
||||||
gameId: 1,
|
|
||||||
},
|
|
||||||
metadataSource: 'manual',
|
|
||||||
igdbId: '12345',
|
|
||||||
rawgId: '67890',
|
|
||||||
thegamesdbId: '54321',
|
|
||||||
createdAt: new Date('2024-01-10'),
|
|
||||||
updatedAt: new Date('2024-01-15'),
|
|
||||||
};
|
|
||||||
|
|
||||||
export function GameDetailPage() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const { gameId } = useParams({ from: '/games/$gameId' });
|
|
||||||
const [game] = useState<Game>(mockGame);
|
|
||||||
|
|
||||||
const handleEdit = () => {
|
|
||||||
navigate({ to: `/games/${game.id}/edit` });
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleDelete = () => {
|
|
||||||
// TODO: Implementar eliminación del juego
|
|
||||||
console.log('Eliminar juego:', game.id);
|
|
||||||
};
|
|
||||||
|
|
||||||
const formatFileSize = (bytes: number) => {
|
|
||||||
if (bytes === 0) return '0 Bytes';
|
|
||||||
const k = 1024;
|
|
||||||
const sizes = ['Bytes', 'KB', 'MB', 'GB'];
|
|
||||||
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
||||||
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Encabezado con botón de retroceso */}
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<Button variant="ghost" onClick={() => navigate({ to: '/games' })} className="gap-2">
|
|
||||||
<ArrowLeft className="h-4 w-4" />
|
|
||||||
Volver
|
|
||||||
</Button>
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold tracking-tight">{game.title}</h1>
|
|
||||||
<p className="text-muted-foreground">Detalles del juego</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Acciones */}
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button onClick={handleEdit} className="gap-2">
|
|
||||||
<Edit className="h-4 w-4" />
|
|
||||||
Editar
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" className="gap-2">
|
|
||||||
<Download className="h-4 w-4" />
|
|
||||||
Descargar ROM
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
onClick={handleDelete}
|
|
||||||
className="gap-2 text-destructive hover:text-destructive"
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
Eliminar
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="grid gap-6 md:grid-cols-3">
|
|
||||||
{/* Información principal */}
|
|
||||||
<div className="md:col-span-2 space-y-6">
|
|
||||||
{/* Descripción */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
<Info className="h-5 w-5" />
|
|
||||||
Descripción
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<p className="text-muted-foreground leading-relaxed">{game.description}</p>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Información técnica */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
<HardDrive className="h-5 w-5" />
|
|
||||||
Información Técnica
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="grid gap-4 md:grid-cols-2">
|
|
||||||
<div>
|
|
||||||
<Label className="text-sm font-medium">Plataforma</Label>
|
|
||||||
<p className="text-sm text-muted-foreground">{game.platform?.name}</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label className="text-sm font-medium">Año de lanzamiento</Label>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
{game.releaseYear || 'Desconocido'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label className="text-sm font-medium">Tamaño del archivo</Label>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
{game.romFile ? formatFileSize(game.romFile.size) : 'No disponible'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label className="text-sm font-medium">Checksum</Label>
|
|
||||||
<p className="text-sm font-mono text-muted-foreground">
|
|
||||||
{game.romFile ? game.romFile.checksum : 'No disponible'}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Etiquetas */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
<Tag className="h-5 w-5" />
|
|
||||||
Etiquetas
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{game.tags.map((tag) => (
|
|
||||||
<Badge
|
|
||||||
key={tag.id}
|
|
||||||
variant="secondary"
|
|
||||||
style={{ backgroundColor: tag.color }}
|
|
||||||
className="text-white"
|
|
||||||
>
|
|
||||||
{tag.name}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
{game.tags.length === 0 && (
|
|
||||||
<p className="text-sm text-muted-foreground">No hay etiquetas asignadas</p>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Panel lateral */}
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Estado del juego */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Estado</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-4">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-sm font-medium">Calificación</span>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
|
||||||
<span className="font-medium">{game.rating || '-'}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-sm font-medium">ROM</span>
|
|
||||||
<Badge variant={game.romFile ? 'default' : 'secondary'}>
|
|
||||||
{game.romFile ? 'Disponible' : 'No disponible'}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-sm font-medium">Metadata</span>
|
|
||||||
<Badge variant={game.metadataSource ? 'default' : 'secondary'}>
|
|
||||||
{game.metadataSource || 'Manual'}
|
|
||||||
</Badge>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Fuentes externas */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Fuentes Externas</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-3">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-sm">IGDB</span>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{game.igdbId ? (
|
|
||||||
<>
|
|
||||||
<Badge variant="outline">Conectado</Badge>
|
|
||||||
<Button size="sm" variant="ghost">
|
|
||||||
<ExternalLink className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Badge variant="secondary">No conectado</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-sm">RAWG</span>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{game.rawgId ? (
|
|
||||||
<>
|
|
||||||
<Badge variant="outline">Conectado</Badge>
|
|
||||||
<Button size="sm" variant="ghost">
|
|
||||||
<ExternalLink className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Badge variant="secondary">No conectado</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<span className="text-sm">TheGamesDB</span>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
{game.thegamesdbId ? (
|
|
||||||
<>
|
|
||||||
<Badge variant="outline">Conectado</Badge>
|
|
||||||
<Button size="sm" variant="ghost">
|
|
||||||
<ExternalLink className="h-3 w-3" />
|
|
||||||
</Button>
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<Badge variant="secondary">No conectado</Badge>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Fechas */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Información de Registro</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent className="space-y-3">
|
|
||||||
<div>
|
|
||||||
<Label className="text-sm font-medium">Fecha de creación</Label>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
{game.createdAt.toLocaleDateString()}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<Label className="text-sm font-medium">Última actualización</Label>
|
|
||||||
<p className="text-sm text-muted-foreground">
|
|
||||||
{game.updatedAt.toLocaleDateString()}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Acciones adicionales */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Acciones Rápidas</CardTitle>
|
|
||||||
<CardDescription>Acciones adicionales para gestionar este juego</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
||||||
<Button variant="outline" className="gap-2">
|
|
||||||
<ExternalLink className="h-4 w-4" />
|
|
||||||
Buscar Metadata
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" className="gap-2">
|
|
||||||
<Calendar className="h-4 w-4" />
|
|
||||||
Añadir Fecha de Compra
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" className="gap-2">
|
|
||||||
<Tag className="h-4 w-4" />
|
|
||||||
Gestionar Etiquetas
|
|
||||||
</Button>
|
|
||||||
<Button variant="outline" className="gap-2">
|
|
||||||
<Download className="h-4 w-4" />
|
|
||||||
Exportar Datos
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Alerta de información */}
|
|
||||||
<Alert>
|
|
||||||
<Info className="h-4 w-4" />
|
|
||||||
<AlertDescription>
|
|
||||||
Esta es una vista previa del juego. Algunas características pueden no estar completamente
|
|
||||||
implementadas en esta versión de demostración.
|
|
||||||
</AlertDescription>
|
|
||||||
</Alert>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,435 +0,0 @@
|
|||||||
import { useState } from 'react';
|
|
||||||
import { useNavigate } from '@tanstack/react-router';
|
|
||||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
|
||||||
import { Button } from '@/components/ui/button';
|
|
||||||
import { Input } from '@/components/ui/input';
|
|
||||||
import { Badge } from '@/components/ui/badge';
|
|
||||||
import {
|
|
||||||
Table,
|
|
||||||
TableBody,
|
|
||||||
TableCell,
|
|
||||||
TableHead,
|
|
||||||
TableHeader,
|
|
||||||
TableRow,
|
|
||||||
} from '@/components/ui/table';
|
|
||||||
import {
|
|
||||||
Select,
|
|
||||||
SelectContent,
|
|
||||||
SelectItem,
|
|
||||||
SelectTrigger,
|
|
||||||
SelectValue,
|
|
||||||
} from '@/components/ui/select';
|
|
||||||
import { Label } from '@/components/ui/label';
|
|
||||||
import { Search, Filter, Plus, Eye, Edit, Trash2, Star } from 'lucide-react';
|
|
||||||
import { Game } from '@/types';
|
|
||||||
|
|
||||||
// Datos simulados para la lista de juegos
|
|
||||||
const mockGames: Game[] = [
|
|
||||||
{
|
|
||||||
id: 1,
|
|
||||||
title: 'The Legend of Zelda: Breath of the Wild',
|
|
||||||
description: 'Un juego de acción-aventura desarrollado por Nintendo',
|
|
||||||
platformId: 1,
|
|
||||||
platform: { id: 1, name: 'Nintendo Switch', description: 'Consola híbrida de Nintendo' },
|
|
||||||
releaseYear: 2017,
|
|
||||||
rating: 9.5,
|
|
||||||
tags: [{ id: 1, name: 'Aventura', color: '#3B82F6', description: 'Juegos de aventura' }],
|
|
||||||
romFile: {
|
|
||||||
id: 1,
|
|
||||||
filename: 'zelda_botw.nsp',
|
|
||||||
path: '/roms/nintendo-switch',
|
|
||||||
size: 14485760,
|
|
||||||
checksum: 'abc123',
|
|
||||||
},
|
|
||||||
metadataSource: 'manual',
|
|
||||||
createdAt: new Date('2024-01-10'),
|
|
||||||
updatedAt: new Date('2024-01-10'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 2,
|
|
||||||
title: 'God of War',
|
|
||||||
description: 'Un juego de acción-aventura basado en la mitología nórdica',
|
|
||||||
platformId: 2,
|
|
||||||
platform: { id: 2, name: 'PlayStation 4', description: 'Consola de Sony' },
|
|
||||||
releaseYear: 2018,
|
|
||||||
rating: 9.2,
|
|
||||||
tags: [{ id: 2, name: 'Acción', color: '#EF4444', description: 'Juegos de acción' }],
|
|
||||||
romFile: {
|
|
||||||
id: 2,
|
|
||||||
filename: 'god_of_war.iso',
|
|
||||||
path: '/roms/ps4',
|
|
||||||
size: 45234120,
|
|
||||||
checksum: 'def456',
|
|
||||||
},
|
|
||||||
metadataSource: 'igdb',
|
|
||||||
createdAt: new Date('2024-01-09'),
|
|
||||||
updatedAt: new Date('2024-01-09'),
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 3,
|
|
||||||
title: 'Cyberpunk 2077',
|
|
||||||
description: 'Un RPG de acción en mundo abierto ambientado en Night City',
|
|
||||||
platformId: 3,
|
|
||||||
platform: { id: 3, name: 'PC', description: 'Plataforma de computadora personal' },
|
|
||||||
releaseYear: 2020,
|
|
||||||
rating: 8.7,
|
|
||||||
tags: [{ id: 3, name: 'RPG', color: '#10B981', description: 'Juegos de rol' }],
|
|
||||||
romFile: undefined,
|
|
||||||
metadataSource: 'rawg',
|
|
||||||
createdAt: new Date('2024-01-08'),
|
|
||||||
updatedAt: new Date('2024-01-08'),
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const platforms = [
|
|
||||||
{ id: 1, name: 'Nintendo Switch' },
|
|
||||||
{ id: 2, name: 'PlayStation 4' },
|
|
||||||
{ id: 3, name: 'PC' },
|
|
||||||
{ id: 4, name: 'Xbox One' },
|
|
||||||
];
|
|
||||||
|
|
||||||
const tags = [
|
|
||||||
{ id: 1, name: 'Aventura', color: '#3B82F6' },
|
|
||||||
{ id: 2, name: 'Acción', color: '#EF4444' },
|
|
||||||
{ id: 3, name: 'RPG', color: '#10B981' },
|
|
||||||
{ id: 4, name: 'Estrategia', color: '#F59E0B' },
|
|
||||||
];
|
|
||||||
|
|
||||||
export function GamesPage() {
|
|
||||||
const navigate = useNavigate();
|
|
||||||
const [searchTerm, setSearchTerm] = useState('');
|
|
||||||
const [selectedPlatform, setSelectedPlatform] = useState<string>('');
|
|
||||||
const [selectedTags, setSelectedTags] = useState<string[]>([]);
|
|
||||||
const [sortBy, setSortBy] = useState<string>('title');
|
|
||||||
const [sortOrder, setSortOrder] = useState<'asc' | 'desc'>('asc');
|
|
||||||
const [currentPage, setCurrentPage] = useState(1);
|
|
||||||
const [games] = useState<Game[]>(mockGames);
|
|
||||||
|
|
||||||
// Filtrar y ordenar juegos
|
|
||||||
const filteredGames = games
|
|
||||||
.filter((game) => {
|
|
||||||
const matchesSearch =
|
|
||||||
game.title.toLowerCase().includes(searchTerm.toLowerCase()) ||
|
|
||||||
game.description?.toLowerCase().includes(searchTerm.toLowerCase());
|
|
||||||
const matchesPlatform = !selectedPlatform || game.platformId.toString() === selectedPlatform;
|
|
||||||
const matchesTags =
|
|
||||||
selectedTags.length === 0 ||
|
|
||||||
selectedTags.some((tagId) => game.tags.some((tag) => tag.id.toString() === tagId));
|
|
||||||
|
|
||||||
return matchesSearch && matchesPlatform && matchesTags;
|
|
||||||
})
|
|
||||||
.sort((a, b) => {
|
|
||||||
let aValue: string | number = '';
|
|
||||||
let bValue: string | number = '';
|
|
||||||
|
|
||||||
switch (sortBy) {
|
|
||||||
case 'title':
|
|
||||||
aValue = a.title?.toLowerCase() || '';
|
|
||||||
bValue = b.title?.toLowerCase() || '';
|
|
||||||
break;
|
|
||||||
case 'platform':
|
|
||||||
aValue = a.platform?.name?.toLowerCase() || '';
|
|
||||||
bValue = b.platform?.name?.toLowerCase() || '';
|
|
||||||
break;
|
|
||||||
case 'releaseYear':
|
|
||||||
aValue = a.releaseYear || 0;
|
|
||||||
bValue = b.releaseYear || 0;
|
|
||||||
break;
|
|
||||||
case 'rating':
|
|
||||||
aValue = a.rating || 0;
|
|
||||||
bValue = b.rating || 0;
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
aValue = a.title?.toLowerCase() || '';
|
|
||||||
bValue = b.title?.toLowerCase() || '';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (sortOrder === 'asc') {
|
|
||||||
return aValue > bValue ? 1 : -1;
|
|
||||||
} else {
|
|
||||||
return aValue < bValue ? 1 : -1;
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const handleSort = (field: string) => {
|
|
||||||
if (sortBy === field) {
|
|
||||||
setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
|
|
||||||
} else {
|
|
||||||
setSortBy(field);
|
|
||||||
setSortOrder('asc');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleTagToggle = (tagId: string) => {
|
|
||||||
setSelectedTags((prev) =>
|
|
||||||
prev.includes(tagId) ? prev.filter((id) => id !== tagId) : [...prev, tagId]
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const clearFilters = () => {
|
|
||||||
setSearchTerm('');
|
|
||||||
setSelectedPlatform('');
|
|
||||||
setSelectedTags([]);
|
|
||||||
setSortBy('title');
|
|
||||||
setSortOrder('asc');
|
|
||||||
setCurrentPage(1);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleGameClick = (gameId: number) => {
|
|
||||||
navigate({ to: `/games/${gameId}` });
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div className="space-y-6">
|
|
||||||
{/* Encabezado */}
|
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
|
|
||||||
<div>
|
|
||||||
<h1 className="text-3xl font-bold tracking-tight">Juegos</h1>
|
|
||||||
<p className="text-muted-foreground">Gestiona tu colección de videojuegos</p>
|
|
||||||
</div>
|
|
||||||
<Button onClick={() => navigate({ to: '/games/create' })}>
|
|
||||||
<Plus className="mr-2 h-4 w-4" />
|
|
||||||
Nuevo Juego
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filtros */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle className="flex items-center gap-2">
|
|
||||||
<Filter className="h-5 w-5" />
|
|
||||||
Filtros y Búsqueda
|
|
||||||
</CardTitle>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
|
|
||||||
{/* Búsqueda */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="search">Buscar</Label>
|
|
||||||
<div className="relative">
|
|
||||||
<Search className="absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
|
|
||||||
<Input
|
|
||||||
id="search"
|
|
||||||
placeholder="Buscar juegos..."
|
|
||||||
value={searchTerm}
|
|
||||||
onChange={(e) => setSearchTerm(e.target.value)}
|
|
||||||
className="pl-8"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Plataforma */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="platform">Plataforma</Label>
|
|
||||||
<Select value={selectedPlatform} onValueChange={setSelectedPlatform}>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue placeholder="Todas las plataformas" />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="">Todas las plataformas</SelectItem>
|
|
||||||
{platforms.map((platform) => (
|
|
||||||
<SelectItem key={platform.id} value={platform.id.toString()}>
|
|
||||||
{platform.name}
|
|
||||||
</SelectItem>
|
|
||||||
))}
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Ordenar por */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label htmlFor="sort">Ordenar por</Label>
|
|
||||||
<Select value={sortBy} onValueChange={setSortBy}>
|
|
||||||
<SelectTrigger>
|
|
||||||
<SelectValue />
|
|
||||||
</SelectTrigger>
|
|
||||||
<SelectContent>
|
|
||||||
<SelectItem value="title">Título</SelectItem>
|
|
||||||
<SelectItem value="releaseYear">Año de lanzamiento</SelectItem>
|
|
||||||
<SelectItem value="rating">Calificación</SelectItem>
|
|
||||||
<SelectItem value="platform">Plataforma</SelectItem>
|
|
||||||
</SelectContent>
|
|
||||||
</Select>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Acciones */}
|
|
||||||
<div className="space-y-2">
|
|
||||||
<Label> </Label>
|
|
||||||
<div className="flex gap-2">
|
|
||||||
<Button variant="outline" onClick={clearFilters}>
|
|
||||||
Limpiar filtros
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Filtros de etiquetas */}
|
|
||||||
<div className="mt-4 space-y-2">
|
|
||||||
<Label>Etiquetas</Label>
|
|
||||||
<div className="flex flex-wrap gap-2">
|
|
||||||
{tags.map((tag) => (
|
|
||||||
<Badge
|
|
||||||
key={tag.id}
|
|
||||||
variant={selectedTags.includes(tag.id.toString()) ? 'default' : 'outline'}
|
|
||||||
className="cursor-pointer"
|
|
||||||
style={
|
|
||||||
selectedTags.includes(tag.id.toString()) ? { backgroundColor: tag.color } : {}
|
|
||||||
}
|
|
||||||
onClick={() => handleTagToggle(tag.id.toString())}
|
|
||||||
>
|
|
||||||
{tag.name}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
|
|
||||||
{/* Tabla de juegos */}
|
|
||||||
<Card>
|
|
||||||
<CardHeader>
|
|
||||||
<CardTitle>Lista de Juegos ({filteredGames.length})</CardTitle>
|
|
||||||
<CardDescription>
|
|
||||||
{filteredGames.length === 0 ? 'No se encontraron juegos' : 'Juegos en tu colección'}
|
|
||||||
</CardDescription>
|
|
||||||
</CardHeader>
|
|
||||||
<CardContent>
|
|
||||||
<div className="rounded-md border">
|
|
||||||
<Table>
|
|
||||||
<TableHeader>
|
|
||||||
<TableRow>
|
|
||||||
<TableHead
|
|
||||||
className="cursor-pointer hover:bg-muted/50"
|
|
||||||
onClick={() => handleSort('title')}
|
|
||||||
>
|
|
||||||
Título {sortBy === 'title' && (sortOrder === 'asc' ? '↑' : '↓')}
|
|
||||||
</TableHead>
|
|
||||||
<TableHead>Plataforma</TableHead>
|
|
||||||
<TableHead
|
|
||||||
className="cursor-pointer hover:bg-muted/50"
|
|
||||||
onClick={() => handleSort('releaseYear')}
|
|
||||||
>
|
|
||||||
Año {sortBy === 'releaseYear' && (sortOrder === 'asc' ? '↑' : '↓')}
|
|
||||||
</TableHead>
|
|
||||||
<TableHead
|
|
||||||
className="cursor-pointer hover:bg-muted/50"
|
|
||||||
onClick={() => handleSort('rating')}
|
|
||||||
>
|
|
||||||
Calificación {sortBy === 'rating' && (sortOrder === 'asc' ? '↑' : '↓')}
|
|
||||||
</TableHead>
|
|
||||||
<TableHead>Etiquetas</TableHead>
|
|
||||||
<TableHead>ROM</TableHead>
|
|
||||||
<TableHead className="w-[100px]">Acciones</TableHead>
|
|
||||||
</TableRow>
|
|
||||||
</TableHeader>
|
|
||||||
<TableBody>
|
|
||||||
{filteredGames.map((game) => (
|
|
||||||
<TableRow
|
|
||||||
key={game.id}
|
|
||||||
className="cursor-pointer hover:bg-muted/50"
|
|
||||||
onClick={() => handleGameClick(game.id)}
|
|
||||||
>
|
|
||||||
<TableCell className="font-medium">{game.title}</TableCell>
|
|
||||||
<TableCell>{game.platform?.name}</TableCell>
|
|
||||||
<TableCell>{game.releaseYear || '-'}</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{game.rating ? (
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Star className="h-4 w-4 fill-yellow-400 text-yellow-400" />
|
|
||||||
<span>{game.rating}</span>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
'-'
|
|
||||||
)}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<div className="flex flex-wrap gap-1">
|
|
||||||
{game.tags.map((tag) => (
|
|
||||||
<Badge
|
|
||||||
key={tag.id}
|
|
||||||
variant="secondary"
|
|
||||||
style={{ backgroundColor: tag.color }}
|
|
||||||
className="text-white"
|
|
||||||
>
|
|
||||||
{tag.name}
|
|
||||||
</Badge>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
{game.romFile ? (
|
|
||||||
<Badge variant="default">✓</Badge>
|
|
||||||
) : (
|
|
||||||
<Badge variant="secondary">-</Badge>
|
|
||||||
)}
|
|
||||||
</TableCell>
|
|
||||||
<TableCell>
|
|
||||||
<div className="flex items-center gap-1">
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
navigate({ to: `/games/${game.id}` });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Eye className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
navigate({ to: `/games/${game.id}/edit` });
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Edit className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
size="sm"
|
|
||||||
variant="ghost"
|
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
// TODO: Implementar eliminación
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4" />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</TableCell>
|
|
||||||
</TableRow>
|
|
||||||
))}
|
|
||||||
</TableBody>
|
|
||||||
</Table>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Paginación */}
|
|
||||||
<div className="flex items-center justify-between space-x-2 py-4">
|
|
||||||
<div className="text-sm text-muted-foreground">
|
|
||||||
Mostrando {filteredGames.length} juegos
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
|
|
||||||
disabled={currentPage === 1}
|
|
||||||
>
|
|
||||||
Anterior
|
|
||||||
</Button>
|
|
||||||
<span className="text-sm">Página {currentPage}</span>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={() => setCurrentPage(currentPage + 1)}
|
|
||||||
disabled={filteredGames.length < 10}
|
|
||||||
>
|
|
||||||
Siguiente
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</CardContent>
|
|
||||||
</Card>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
@@ -1,36 +0,0 @@
|
|||||||
import { QueryClient } from '@tanstack/react-query';
|
|
||||||
|
|
||||||
export const queryClient = new QueryClient({
|
|
||||||
defaultOptions: {
|
|
||||||
queries: {
|
|
||||||
staleTime: 1000 * 60 * 5, // 5 minutos
|
|
||||||
refetchOnWindowFocus: false,
|
|
||||||
retry: (failureCount, error) => {
|
|
||||||
// No reintentar si es un error de 404 o 401
|
|
||||||
if (error instanceof Error) {
|
|
||||||
const status = (error as any).status;
|
|
||||||
if (status === 404 || status === 401) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Reintentar hasta 3 veces para otros errores
|
|
||||||
return failureCount < 3;
|
|
||||||
},
|
|
||||||
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), // Exponential backoff
|
|
||||||
},
|
|
||||||
mutations: {
|
|
||||||
retry: (failureCount, error) => {
|
|
||||||
// No reintentar si es un error de 404 o 401
|
|
||||||
if (error instanceof Error) {
|
|
||||||
const status = (error as any).status;
|
|
||||||
if (status === 404 || status === 401) {
|
|
||||||
return false;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Reintentar hasta 2 veces para otros errores
|
|
||||||
return failureCount < 2;
|
|
||||||
},
|
|
||||||
retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), // Exponential backoff
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -1,99 +0,0 @@
|
|||||||
import { createRootRoute, createRoute, createRouter } from '@tanstack/react-router';
|
|
||||||
import { lazy } from 'react';
|
|
||||||
|
|
||||||
// Layout principal
|
|
||||||
const Layout = lazy(() => import('./components/layout/Layout'));
|
|
||||||
|
|
||||||
// Páginas
|
|
||||||
const DashboardPage = lazy(() => import('./pages/DashboardPage'));
|
|
||||||
const GamesPage = lazy(() => import('./pages/GamesPage'));
|
|
||||||
const GameDetailPage = lazy(() => import('./pages/GameDetailPage'));
|
|
||||||
const CreateGamePage = lazy(() => import('./pages/CreateGamePage'));
|
|
||||||
const ImportRomPage = lazy(() => import('./pages/ImportRomPage'));
|
|
||||||
const SettingsPage = lazy(() => import('./pages/SettingsPage'));
|
|
||||||
const PlatformsPage = lazy(() => import('./pages/PlatformsPage'));
|
|
||||||
const TagsPage = lazy(() => import('./pages/TagsPage'));
|
|
||||||
const ExportPage = lazy(() => import('./pages/ExportPage'));
|
|
||||||
|
|
||||||
// Ruta raíz
|
|
||||||
const rootRoute = createRootRoute({
|
|
||||||
component: Layout,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Rutas principales
|
|
||||||
const dashboardRoute = createRoute({
|
|
||||||
path: '/',
|
|
||||||
component: DashboardPage,
|
|
||||||
getParentRoute: () => rootRoute,
|
|
||||||
});
|
|
||||||
|
|
||||||
const gamesRoute = createRoute({
|
|
||||||
path: '/games',
|
|
||||||
component: GamesPage,
|
|
||||||
getParentRoute: () => rootRoute,
|
|
||||||
});
|
|
||||||
|
|
||||||
const gameDetailRoute = createRoute({
|
|
||||||
path: '/games/$gameId',
|
|
||||||
component: GameDetailPage,
|
|
||||||
getParentRoute: () => rootRoute,
|
|
||||||
});
|
|
||||||
|
|
||||||
const createGameRoute = createRoute({
|
|
||||||
path: '/games/create',
|
|
||||||
component: CreateGamePage,
|
|
||||||
getParentRoute: () => rootRoute,
|
|
||||||
});
|
|
||||||
|
|
||||||
const importRoute = createRoute({
|
|
||||||
path: '/import',
|
|
||||||
component: ImportRomPage,
|
|
||||||
getParentRoute: () => rootRoute,
|
|
||||||
});
|
|
||||||
|
|
||||||
const settingsRoute = createRoute({
|
|
||||||
path: '/settings',
|
|
||||||
component: SettingsPage,
|
|
||||||
getParentRoute: () => rootRoute,
|
|
||||||
});
|
|
||||||
|
|
||||||
const platformsRoute = createRoute({
|
|
||||||
path: '/platforms',
|
|
||||||
component: PlatformsPage,
|
|
||||||
getParentRoute: () => rootRoute,
|
|
||||||
});
|
|
||||||
|
|
||||||
const tagsRoute = createRoute({
|
|
||||||
path: '/tags',
|
|
||||||
component: TagsPage,
|
|
||||||
getParentRoute: () => rootRoute,
|
|
||||||
});
|
|
||||||
|
|
||||||
const exportRoute = createRoute({
|
|
||||||
path: '/export',
|
|
||||||
component: ExportPage,
|
|
||||||
getParentRoute: () => rootRoute,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Ruta de not found
|
|
||||||
const notFoundRoute = createRoute({
|
|
||||||
path: '*',
|
|
||||||
component: () => <div>Página no encontrada</div>,
|
|
||||||
getParentRoute: () => rootRoute,
|
|
||||||
});
|
|
||||||
|
|
||||||
// Crear router
|
|
||||||
export const router = createRouter({
|
|
||||||
routeTree: rootRoute.addChildren([
|
|
||||||
dashboardRoute,
|
|
||||||
gamesRoute,
|
|
||||||
gameDetailRoute,
|
|
||||||
createGameRoute,
|
|
||||||
importRoute,
|
|
||||||
settingsRoute,
|
|
||||||
platformsRoute,
|
|
||||||
tagsRoute,
|
|
||||||
exportRoute,
|
|
||||||
notFoundRoute,
|
|
||||||
]),
|
|
||||||
});
|
|
||||||
@@ -1,60 +0,0 @@
|
|||||||
@import "tailwindcss/preflight";
|
|
||||||
@import "tailwindcss";
|
|
||||||
|
|
||||||
@layer base {
|
|
||||||
:root {
|
|
||||||
--background: 222.2 84% 4.9%;
|
|
||||||
--foreground: 210 40% 98%;
|
|
||||||
--card: 222.2 84% 4.9%;
|
|
||||||
--card-foreground: 210 40% 98%;
|
|
||||||
--popover: 222.2 84% 4.9%;
|
|
||||||
--popover-foreground: 210 40% 98%;
|
|
||||||
--primary: 263.4 70% 50.4%;
|
|
||||||
--primary-foreground: 210 40% 98%;
|
|
||||||
--secondary: 217.2 32.6% 17.5%;
|
|
||||||
--secondary-foreground: 210 40% 98%;
|
|
||||||
--muted: 217.2 32.6% 17.5%;
|
|
||||||
--muted-foreground: 215 20.2% 65.1%;
|
|
||||||
--accent: 217.2 32.6% 17.5%;
|
|
||||||
--accent-foreground: 210 40% 98%;
|
|
||||||
--destructive: 0 62.8% 30.6%;
|
|
||||||
--destructive-foreground: 210 40% 98%;
|
|
||||||
--border: 217.2 32.6% 17.5%;
|
|
||||||
--input: 217.2 32.6% 17.5%;
|
|
||||||
--ring: 263.4 70% 50.4%;
|
|
||||||
--radius: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.dark {
|
|
||||||
--background: 222.2 84% 4.9%;
|
|
||||||
--foreground: 210 40% 98%;
|
|
||||||
--card: 222.2 84% 4.9%;
|
|
||||||
--card-foreground: 210 40% 98%;
|
|
||||||
--popover: 222.2 84% 4.9%;
|
|
||||||
--popover-foreground: 210 40% 98%;
|
|
||||||
--primary: 263.4 70% 50.4%;
|
|
||||||
--primary-foreground: 210 40% 98%;
|
|
||||||
--secondary: 217.2 32.6% 17.5%;
|
|
||||||
--secondary-foreground: 210 40% 98%;
|
|
||||||
--muted: 217.2 32.6% 17.5%;
|
|
||||||
--muted-foreground: 215 20.2% 65.1%;
|
|
||||||
--accent: 217.2 32.6% 17.5%;
|
|
||||||
--accent-foreground: 210 40% 98%;
|
|
||||||
--destructive: 0 62.8% 30.6%;
|
|
||||||
--destructive-foreground: 210 40% 98%;
|
|
||||||
--border: 217.2 32.6% 17.5%;
|
|
||||||
--input: 217.2 32.6% 17.5%;
|
|
||||||
--ring: 263.4 70% 50.4%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@layer base {
|
|
||||||
* {
|
|
||||||
border-color: hsl(var(--border));
|
|
||||||
}
|
|
||||||
body {
|
|
||||||
background-color: hsl(var(--background));
|
|
||||||
color: hsl(var(--foreground));
|
|
||||||
font-feature-settings: 'rlig' 1, 'calt' 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,238 +0,0 @@
|
|||||||
// Tipos base de la aplicación
|
|
||||||
export interface BaseEntity {
|
|
||||||
id: number;
|
|
||||||
createdAt: Date;
|
|
||||||
updatedAt: Date;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de Juego
|
|
||||||
export interface Game extends BaseEntity {
|
|
||||||
title: string;
|
|
||||||
description?: string;
|
|
||||||
platformId: number;
|
|
||||||
platform?: Platform;
|
|
||||||
releaseYear?: number;
|
|
||||||
rating?: number;
|
|
||||||
tags: Tag[];
|
|
||||||
romFile?: RomFile;
|
|
||||||
metadataSource?: 'igdb' | 'rawg' | 'thegamesdb' | 'manual';
|
|
||||||
igdbId?: string;
|
|
||||||
rawgId?: string;
|
|
||||||
thegamesdbId?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de Plataforma
|
|
||||||
export interface Platform extends BaseEntity {
|
|
||||||
name: string;
|
|
||||||
description?: string;
|
|
||||||
manufacturer?: string;
|
|
||||||
releaseYear?: number;
|
|
||||||
romExtension?: string;
|
|
||||||
games: Game[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de ROM
|
|
||||||
export interface RomFile extends BaseEntity {
|
|
||||||
filename: string;
|
|
||||||
path: string;
|
|
||||||
size: number;
|
|
||||||
checksum: string;
|
|
||||||
gameId: number;
|
|
||||||
game?: Game;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de Etiqueta
|
|
||||||
export interface Tag extends BaseEntity {
|
|
||||||
name: string;
|
|
||||||
color: string;
|
|
||||||
description?: string;
|
|
||||||
games: Game[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de Compra
|
|
||||||
export interface Purchase extends BaseEntity {
|
|
||||||
gameId: number;
|
|
||||||
game?: Game;
|
|
||||||
price: number;
|
|
||||||
currency: string;
|
|
||||||
purchaseDate: Date;
|
|
||||||
store?: string;
|
|
||||||
notes?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de Historial de Precios
|
|
||||||
export interface PriceHistory extends BaseEntity {
|
|
||||||
gameId: number;
|
|
||||||
game?: Game;
|
|
||||||
price: number;
|
|
||||||
currency: string;
|
|
||||||
date: Date;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de Arte
|
|
||||||
export interface Artwork extends BaseEntity {
|
|
||||||
gameId: number;
|
|
||||||
game?: Game;
|
|
||||||
type: 'cover' | 'screenshot' | 'logo' | 'banner';
|
|
||||||
url: string;
|
|
||||||
width?: number;
|
|
||||||
height?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de Configuración
|
|
||||||
export interface Settings {
|
|
||||||
igdbApiKey?: string;
|
|
||||||
rawgApiKey?: string;
|
|
||||||
thegamesdbApiKey?: string;
|
|
||||||
defaultRomDirectory?: string;
|
|
||||||
autoImportEnabled: boolean;
|
|
||||||
metadataSourcePriority: ('igdb' | 'rawg' | 'thegamesdb')[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de API Response
|
|
||||||
export interface ApiResponse<T> {
|
|
||||||
data: T;
|
|
||||||
message?: string;
|
|
||||||
error?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PaginatedResponse<T> {
|
|
||||||
data: T[];
|
|
||||||
pagination: {
|
|
||||||
page: number;
|
|
||||||
limit: number;
|
|
||||||
total: number;
|
|
||||||
totalPages: number;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de Filtros
|
|
||||||
export interface GameFilters {
|
|
||||||
search?: string;
|
|
||||||
platformId?: number;
|
|
||||||
tags?: number[];
|
|
||||||
rating?: number;
|
|
||||||
releaseYear?: number;
|
|
||||||
metadataSource?: string;
|
|
||||||
hasRom?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PlatformFilters {
|
|
||||||
search?: string;
|
|
||||||
manufacturer?: string;
|
|
||||||
releaseYear?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TagFilters {
|
|
||||||
search?: string;
|
|
||||||
color?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de Formularios
|
|
||||||
export interface GameFormData {
|
|
||||||
title: string;
|
|
||||||
description?: string;
|
|
||||||
platformId: number;
|
|
||||||
releaseYear?: number;
|
|
||||||
rating?: number;
|
|
||||||
tags?: number[];
|
|
||||||
romFile?: File;
|
|
||||||
metadataSource?: 'igdb' | 'rawg' | 'thegamesdb' | 'manual';
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface PlatformFormData {
|
|
||||||
name: string;
|
|
||||||
description?: string;
|
|
||||||
manufacturer?: string;
|
|
||||||
releaseYear?: number;
|
|
||||||
romExtension?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TagFormData {
|
|
||||||
name: string;
|
|
||||||
color: string;
|
|
||||||
description?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ImportRomFormData {
|
|
||||||
romPath: string;
|
|
||||||
platformId: number;
|
|
||||||
autoScan: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface SettingsFormData {
|
|
||||||
igdbApiKey?: string;
|
|
||||||
rawgApiKey?: string;
|
|
||||||
thegamesdbApiKey?: string;
|
|
||||||
defaultRomDirectory?: string;
|
|
||||||
autoImportEnabled: boolean;
|
|
||||||
metadataSourcePriority: ('igdb' | 'rawg' | 'thegamesdb')[];
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de Metadata
|
|
||||||
export interface GameMetadata {
|
|
||||||
title: string;
|
|
||||||
description?: string;
|
|
||||||
releaseDate?: string;
|
|
||||||
rating?: number;
|
|
||||||
genres?: string[];
|
|
||||||
platforms?: string[];
|
|
||||||
coverUrl?: string;
|
|
||||||
screenshots?: string[];
|
|
||||||
developer?: string;
|
|
||||||
publisher?: string;
|
|
||||||
region?: string;
|
|
||||||
language?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de Errores
|
|
||||||
export interface ApiError {
|
|
||||||
message: string;
|
|
||||||
code?: string;
|
|
||||||
details?: Record<string, string[]>;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface ValidationError {
|
|
||||||
field: string;
|
|
||||||
message: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de UI
|
|
||||||
export interface MenuItem {
|
|
||||||
label: string;
|
|
||||||
href: string;
|
|
||||||
icon?: string;
|
|
||||||
children?: MenuItem[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BreadcrumbItem {
|
|
||||||
label: string;
|
|
||||||
href?: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TableColumn<T> {
|
|
||||||
key: keyof T;
|
|
||||||
label: string;
|
|
||||||
sortable?: boolean;
|
|
||||||
render?: (value: any, record: T) => React.ReactNode;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tipos de Hooks
|
|
||||||
export interface UseQueryOptions<T> {
|
|
||||||
enabled?: boolean;
|
|
||||||
refetchOnWindowFocus?: boolean;
|
|
||||||
refetchOnMount?: boolean;
|
|
||||||
refetchOnReconnect?: boolean;
|
|
||||||
staleTime?: number;
|
|
||||||
cacheTime?: number;
|
|
||||||
retry?: number;
|
|
||||||
retryDelay?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface UseMutationOptions<T> {
|
|
||||||
onSuccess?: (data: T) => void;
|
|
||||||
onError?: (error: Error) => void;
|
|
||||||
onSettled?: () => void;
|
|
||||||
retry?: number;
|
|
||||||
retryDelay?: number;
|
|
||||||
}
|
|
||||||
@@ -1,76 +0,0 @@
|
|||||||
import type { Config } from 'tailwindcss';
|
|
||||||
import tailwindcssAnimate from 'tailwindcss-animate';
|
|
||||||
|
|
||||||
const config: Config = {
|
|
||||||
darkMode: 'class',
|
|
||||||
content: ['./src/**/*.{js,ts,jsx,tsx,mdx}', './index.html'],
|
|
||||||
prefix: '',
|
|
||||||
theme: {
|
|
||||||
container: {
|
|
||||||
center: true,
|
|
||||||
padding: '2rem',
|
|
||||||
screens: {
|
|
||||||
'2xl': '1400px',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
extend: {
|
|
||||||
colors: {
|
|
||||||
border: 'hsl(var(--border))',
|
|
||||||
input: 'hsl(var(--input))',
|
|
||||||
ring: 'hsl(var(--ring))',
|
|
||||||
background: 'hsl(var(--background))',
|
|
||||||
foreground: 'hsl(var(--foreground))',
|
|
||||||
card: 'hsl(var(--card))',
|
|
||||||
cardForeground: 'hsl(var(--card-foreground))',
|
|
||||||
popover: 'hsl(var(--popover))',
|
|
||||||
popoverForeground: 'hsl(var(--popover-foreground))',
|
|
||||||
muted: 'hsl(var(--muted))',
|
|
||||||
mutedForeground: 'hsl(var(--muted-foreground))',
|
|
||||||
accent: 'hsl(var(--accent))',
|
|
||||||
accentForeground: 'hsl(var(--accent-foreground))',
|
|
||||||
destructive: 'hsl(var(--destructive))',
|
|
||||||
destructiveForeground: 'hsl(var(--destructive-foreground))',
|
|
||||||
primary: {
|
|
||||||
DEFAULT: 'hsl(var(--primary))',
|
|
||||||
foreground: 'hsl(var(--primary-foreground))',
|
|
||||||
},
|
|
||||||
secondary: {
|
|
||||||
DEFAULT: 'hsl(var(--secondary))',
|
|
||||||
foreground: 'hsl(var(--secondary-foreground))',
|
|
||||||
},
|
|
||||||
sidebar: {
|
|
||||||
DEFAULT: 'hsl(var(--sidebar))',
|
|
||||||
foreground: 'hsl(var(--sidebar-foreground))',
|
|
||||||
primary: 'hsl(var(--sidebar-primary))',
|
|
||||||
primaryForeground: 'hsl(var(--sidebar-primary-foreground))',
|
|
||||||
accent: 'hsl(var(--sidebar-accent))',
|
|
||||||
accentForeground: 'hsl(var(--sidebar-accent-foreground))',
|
|
||||||
border: 'hsl(var(--sidebar-border))',
|
|
||||||
ring: 'hsl(var(--sidebar-ring))',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
borderRadius: {
|
|
||||||
lg: 'var(--radius)',
|
|
||||||
md: 'calc(var(--radius) - 2px)',
|
|
||||||
sm: 'calc(var(--radius) - 4px)',
|
|
||||||
},
|
|
||||||
keyframes: {
|
|
||||||
'accordion-down': {
|
|
||||||
from: { height: '0' },
|
|
||||||
to: { height: 'var(--radix-accordion-content-height)' },
|
|
||||||
},
|
|
||||||
'accordion-up': {
|
|
||||||
from: { height: 'var(--radix-accordion-content-height)' },
|
|
||||||
to: { height: '0' },
|
|
||||||
},
|
|
||||||
},
|
|
||||||
animation: {
|
|
||||||
'accordion-down': 'accordion-down 0.2s ease-out',
|
|
||||||
'accordion-up': 'accordion-up 0.2s ease-out',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
plugins: [tailwindcssAnimate],
|
|
||||||
};
|
|
||||||
|
|
||||||
export default config;
|
|
||||||
@@ -1,32 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
|
|
||||||
"target": "ES2022",
|
|
||||||
"useDefineForClassFields": true,
|
|
||||||
"lib": ["ES2022", "DOM", "DOM.Iterable"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"types": ["vite/client"],
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"verbatimModuleSyntax": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"erasableSyntaxOnly": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true,
|
|
||||||
"baseUrl": ".",
|
|
||||||
"paths": {
|
|
||||||
"@/*": ["./src/*"]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"include": ["src"]
|
|
||||||
}
|
|
||||||
@@ -1,7 +1,34 @@
|
|||||||
{
|
{
|
||||||
"files": [],
|
"compilerOptions": {
|
||||||
"references": [
|
"target": "ES2017",
|
||||||
{ "path": "./tsconfig.app.json" },
|
"lib": ["dom", "dom.iterable", "esnext"],
|
||||||
{ "path": "./tsconfig.node.json" }
|
"allowJs": true,
|
||||||
]
|
"skipLibCheck": true,
|
||||||
|
"strict": true,
|
||||||
|
"noEmit": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"module": "esnext",
|
||||||
|
"moduleResolution": "bundler",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"jsx": "react-jsx",
|
||||||
|
"incremental": true,
|
||||||
|
"plugins": [
|
||||||
|
{
|
||||||
|
"name": "next"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["./src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"next-env.d.ts",
|
||||||
|
"**/*.ts",
|
||||||
|
"**/*.tsx",
|
||||||
|
".next/types/**/*.ts",
|
||||||
|
".next/dev/types/**/*.ts",
|
||||||
|
"**/*.mts"
|
||||||
|
],
|
||||||
|
"exclude": ["node_modules"]
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,26 +0,0 @@
|
|||||||
{
|
|
||||||
"compilerOptions": {
|
|
||||||
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
|
|
||||||
"target": "ES2023",
|
|
||||||
"lib": ["ES2023"],
|
|
||||||
"module": "ESNext",
|
|
||||||
"types": ["node"],
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
/* Bundler mode */
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
"allowImportingTsExtensions": true,
|
|
||||||
"verbatimModuleSyntax": true,
|
|
||||||
"moduleDetection": "force",
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/* Linting */
|
|
||||||
"strict": true,
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
"erasableSyntaxOnly": true,
|
|
||||||
"noFallthroughCasesInSwitch": true,
|
|
||||||
"noUncheckedSideEffectImports": true
|
|
||||||
},
|
|
||||||
"include": ["vite.config.ts"]
|
|
||||||
}
|
|
||||||
@@ -1,23 +0,0 @@
|
|||||||
import { defineConfig } from 'vite';
|
|
||||||
import react from '@vitejs/plugin-react';
|
|
||||||
import tailwindcss from '@tailwindcss/vite';
|
|
||||||
import path from 'path';
|
|
||||||
|
|
||||||
// https://vite.dev/config/
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [react(), tailwindcss()],
|
|
||||||
resolve: {
|
|
||||||
alias: {
|
|
||||||
'@': path.resolve(__dirname, './src'),
|
|
||||||
},
|
|
||||||
},
|
|
||||||
server: {
|
|
||||||
port: 5173,
|
|
||||||
proxy: {
|
|
||||||
'/api': {
|
|
||||||
target: 'http://localhost:3000',
|
|
||||||
changeOrigin: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Reference in New Issue
Block a user