diff --git a/frontend/index.html b/frontend/index.html index 0fca6f0..bb5cdd7 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -2,9 +2,9 @@ - + - frontend + Full Circuit
diff --git a/frontend/package-lock.json b/frontend/package-lock.json index b260a60..981b214 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -12,6 +12,7 @@ "lucide-react": "^1.64.0", "react": "^19.2.8", "react-dom": "^19.2.8", + "react-router": "^8.5.1", "tailwind-merge": "^3.7.0", "tailwindcss": "^4.3.3" }, @@ -935,6 +936,12 @@ "url": "https://github.com/sponsors/oxc-project" } }, + "node_modules/@remix-run/route-pattern": { + "version": "0.22.1", + "resolved": "https://registry.npmjs.org/@remix-run/route-pattern/-/route-pattern-0.22.1.tgz", + "integrity": "sha512-czdGJWh09Lapvcqt7Vb09KlrU2PhRJ8xQaI+AItTuD9aDJ5MAgxnS38lnys6Ll+6RJEqPiaUqTwIQhVLwFvv+w==", + "license": "MIT" + }, "node_modules/@rolldown/binding-android-arm-eabi": { "version": "1.2.15", "resolved": "https://registry.npmjs.org/@rolldown/binding-android-arm-eabi/-/binding-android-arm-eabi-1.2.15.tgz", @@ -1892,7 +1899,7 @@ "version": "19.3.0", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-19.3.0.tgz", "integrity": "sha512-ZI7bU42mZXXKHn/qNLEw2IrbiINU7X5+vfgdixBHkCNpYWXjKgfQ/P+uyGb5CjOLB9UcnTeg3rylQtV2hym44Q==", - "dev": true, + "devOptional": true, "license": "MIT", "peerDependencies": { "@types/react": "^19.3.0" @@ -2503,6 +2510,12 @@ "url": "https://opencollective.com/express" } }, + "node_modules/cookie-es": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/cookie-es/-/cookie-es-3.1.1.tgz", + "integrity": "sha512-UaXxwISYJPTr9hwQxMFYZ7kNhSXboMXP+Z3TRX6f1/NyaGPfuNUZOWP1pUEb75B2HjfklIYLVRfWiFZJyC6Npg==", + "license": "MIT" + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -4025,6 +4038,36 @@ "license": "MIT", "peer": true }, + "node_modules/react-router": { + "version": "8.5.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-8.5.1.tgz", + "integrity": "sha512-5u1eQ46QjuXjNfEnLwzrnou1Bm5dquO3xjVYkkMYCudtkicD2AQHtx+fvXzPATtPJx8TW6DR1x1TDRqsfHyZBw==", + "license": "MIT", + "dependencies": { + "@remix-run/route-pattern": "^0.22.1", + "cookie-es": "^3.1.1" + }, + "engines": { + "node": ">=22.22.0" + }, + "peerDependencies": { + "@types/react": ">=19.2.0", + "@types/react-dom": ">=19.2.0", + "react": ">=19.2.7", + "react-dom": ">=19.2.7" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/redent": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz", diff --git a/frontend/package.json b/frontend/package.json index ac94c40..2bca6c4 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -15,6 +15,7 @@ "lucide-react": "^1.64.0", "react": "^19.2.8", "react-dom": "^19.2.8", + "react-router": "^8.5.1", "tailwind-merge": "^3.7.0", "tailwindcss": "^4.3.3" }, diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico new file mode 100644 index 0000000..a2fcf75 Binary files /dev/null and b/frontend/public/favicon.ico differ diff --git a/frontend/public/favicon.svg b/frontend/public/favicon.svg deleted file mode 100644 index 6893eb1..0000000 --- a/frontend/public/favicon.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/frontend/public/icons.svg b/frontend/public/icons.svg deleted file mode 100644 index e952219..0000000 --- a/frontend/public/icons.svg +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx index 3e0db5d..0ebd58f 100644 --- a/frontend/src/App.tsx +++ b/frontend/src/App.tsx @@ -1,38 +1,40 @@ +import { useState } from "react"; import "./App.css"; import HomePage from "./pages/homePage/homePage"; import CategoryPage from "./pages/categoryPage/categoryPage"; import PcBuilderPage from "./pages/pcBuilderPage/pcBuilderPage"; import CommunityPage from "./pages/communityPage/communityPage"; -import NavBar from "./components/NavBar"; -import Footer from "./components/Footer"; -import BackToTopButton from "./components/BackToTopButton"; +import NavBar from "./components/pageSections/Header"; +import Footer from "./components/pageSections/Footer"; +import BackToTopButton from "./components/buttons/BackToTopButton"; +import { Routes, Route, useParams } from "react-router"; -function App() { - const params = new URLSearchParams(window.location.search); - const page = params.get("page"); - const category = params.get("category"); - const search = (params.get("search") ?? "").trim(); - - let content = ; +function CategoryRoute() { + const { category } = useParams<{ category: string }>(); + return ; +} - if (page === "builder") { - content = ; - } else if (page === "community") { - content = ; - } else if (category !== null) { - content = ; - } else if (page === "explore") { - content = ; - } +function App() { + const [search, setSearch] = useState(""); return (
- +
- -
{content}
- +
+ + } /> + } + /> + } /> + } /> + } /> + 404 - Page not found

} /> + +
diff --git a/frontend/src/assets/.gitkeep b/frontend/src/assets/.gitkeep deleted file mode 100644 index e69de29..0000000 diff --git a/frontend/src/components/DesktopComponentDetailPage.tsx b/frontend/src/components/DesktopComponentDetailPage.tsx index 3783266..534d8e3 100644 --- a/frontend/src/components/DesktopComponentDetailPage.tsx +++ b/frontend/src/components/DesktopComponentDetailPage.tsx @@ -1,10 +1,11 @@ import { useBuild } from '@/context/BuildContext' import { Trash2, X } from 'lucide-react' import { useId, useState } from 'react' +import { Link } from 'react-router' import type { PcPart } from '@/types/types' import { categories } from '@/types/categories' import { formatSpecification, getSpecifications } from '@/utils/partSpecifications' -import AddToBuildButton from './AddToBuildButton' +import AddToBuildButton from './buttons/AddToBuildButton' export default function DesktopComponentDetailPage({ part }: { part: PcPart }) { const [expanded, setExpanded] = useState(false) @@ -23,7 +24,7 @@ export default function DesktopComponentDetailPage({ part }: { part: PcPart }) {