From 2847df63405cbefac2635c89a1bbce3f865e9cfe Mon Sep 17 00:00:00 2001 From: hu xiaotong <416314413@163.com> Date: Thu, 17 Apr 2025 17:17:56 +0800 Subject: [PATCH] init --- package-lock.json | 70 +++++++++++++++++- package.json | 3 +- src/App.tsx | 32 ++++++-- src/components/Navbar.tsx | 150 +++++++++++++++++++++++++------------- src/pages/Battles.tsx | 16 ++++ src/pages/Builds.tsx | 16 ++++ src/pages/Characters.tsx | 16 ++++ src/pages/Community.tsx | 16 ++++ src/pages/News.tsx | 16 ++++ 9 files changed, 275 insertions(+), 60 deletions(-) create mode 100644 src/pages/Battles.tsx create mode 100644 src/pages/Builds.tsx create mode 100644 src/pages/Characters.tsx create mode 100644 src/pages/Community.tsx create mode 100644 src/pages/News.tsx diff --git a/package-lock.json b/package-lock.json index e6c6c43..89ea480 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,8 @@ "dependencies": { "@fortawesome/fontawesome-free": "^6.7.2", "react": "^19.1.0", - "react-dom": "^19.1.0" + "react-dom": "^19.1.0", + "react-router-dom": "^7.5.0" }, "devDependencies": { "@biomejs/biome": "1.9.4", @@ -774,6 +775,12 @@ "tailwindcss": "4.1.4" } }, + "node_modules/@types/cookie": { + "version": "0.6.0", + "resolved": "https://registry.npmmirror.com/@types/cookie/-/cookie-0.6.0.tgz", + "integrity": "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA==", + "license": "MIT" + }, "node_modules/@types/react": { "version": "19.1.2", "resolved": "https://registry.npmmirror.com/@types/react/-/react-19.1.2.tgz", @@ -815,6 +822,15 @@ ], "license": "CC-BY-4.0" }, + "node_modules/cookie": { + "version": "1.0.2", + "resolved": "https://registry.npmmirror.com/cookie/-/cookie-1.0.2.tgz", + "integrity": "sha512-9Kr/j4O16ISv8zBBhJoi4bXOYNTkFLOqSL3UDB0njXxCXNezjeyVrJyGOWtgfs/q2km1gwBcfH8q1yEGoMYunA==", + "license": "MIT", + "engines": { + "node": ">=18" + } + }, "node_modules/core-js": { "version": "3.41.0", "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.41.0.tgz", @@ -1227,12 +1243,58 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.5.0", + "resolved": "https://registry.npmmirror.com/react-router/-/react-router-7.5.0.tgz", + "integrity": "sha512-estOHrRlDMKdlQa6Mj32gIks4J+AxNsYoE0DbTTxiMy2mPzZuWSDU+N85/r1IlNR7kGfznF3VCUlvc5IUO+B9g==", + "license": "MIT", + "dependencies": { + "@types/cookie": "^0.6.0", + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0", + "turbo-stream": "2.4.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.5.0", + "resolved": "https://registry.npmmirror.com/react-router-dom/-/react-router-dom-7.5.0.tgz", + "integrity": "sha512-fFhGFCULy4vIseTtH5PNcY/VvDJK5gvOWcwJVHQp8JQcWVr85ENhJ3UpuF/zP1tQOIFYNRJHzXtyhU1Bdgw0RA==", + "license": "MIT", + "dependencies": { + "react-router": "7.5.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/scheduler": { "version": "0.26.0", "resolved": "https://registry.npmmirror.com/scheduler/-/scheduler-0.26.0.tgz", "integrity": "sha512-NlHwttCI/l5gCPR3D1nNXtWABUmBwvZpEQiD4IXSbIDq8BzLIK/7Ir5gTFSGZDUu37K5cMNp0hFtzO38sC7gWA==", "license": "MIT" }, + "node_modules/set-cookie-parser": { + "version": "2.7.1", + "resolved": "https://registry.npmmirror.com/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz", + "integrity": "sha512-IOc8uWeOZgnb3ptbCURJWNjWUPcO3ZnTTdzsurqERrP6nPyv+paC55vJM0LpOlT2ne+Ix+9+CRG1MNLlyZ4GjQ==", + "license": "MIT" + }, "node_modules/source-map-js": { "version": "1.2.1", "resolved": "https://registry.npmmirror.com/source-map-js/-/source-map-js-1.2.1.tgz", @@ -1274,6 +1336,12 @@ "dev": true, "license": "0BSD" }, + "node_modules/turbo-stream": { + "version": "2.4.0", + "resolved": "https://registry.npmmirror.com/turbo-stream/-/turbo-stream-2.4.0.tgz", + "integrity": "sha512-FHncC10WpBd2eOmGwpmQsWLDoK4cqsA/UT/GqNoaKOQnT8uzhtCbg3EoUDMvqpOSAI0S26mr0rkjzbOO6S3v1g==", + "license": "ISC" + }, "node_modules/typescript": { "version": "5.8.3", "resolved": "https://registry.npmmirror.com/typescript/-/typescript-5.8.3.tgz", diff --git a/package.json b/package.json index 749a1b2..51d8f36 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ "dependencies": { "@fortawesome/fontawesome-free": "^6.7.2", "react": "^19.1.0", - "react-dom": "^19.1.0" + "react-dom": "^19.1.0", + "react-router-dom": "^7.5.0" }, "devDependencies": { "@biomejs/biome": "1.9.4", diff --git a/src/App.tsx b/src/App.tsx index a4790e1..8b89c82 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,8 +1,14 @@ // The exported code uses Tailwind CSS. Install Tailwind CSS in your dev environment to ensure all styles work. import React, { useState, useEffect } from "react"; +import { BrowserRouter as Router, Routes, Route, useNavigate } from "react-router-dom"; import Navbar from "./components/Navbar"; import Footer from "./components/Footer"; import Home from "./pages/Home"; +import Characters from "./pages/Characters"; +import Builds from "./pages/Builds"; +import Battles from "./pages/Battles"; +import News from "./pages/News"; +import Community from "./pages/Community"; import LoginModal from "./components/LoginModal"; const App: React.FC = () => { @@ -38,14 +44,24 @@ const App: React.FC = () => { }; return ( -
- -
- -
-
+ +
+ +
+ + } /> + } /> + } /> + } /> + } /> + } /> + +
+
+ ); }; + export default App; diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index c22e9c4..36929d7 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -1,4 +1,5 @@ import React, { useState } from "react"; +import { Link, useLocation } from "react-router-dom"; interface NavbarProps { onLoginClick: () => void; @@ -6,6 +7,7 @@ interface NavbarProps { const Navbar: React.FC = ({ onLoginClick }) => { const [isMenuOpen, setIsMenuOpen] = useState(false); + const location = useLocation(); return (