diff --git a/package.json b/package.json
index 991c634..e302c05 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,8 @@
},
"dependencies": {
"react": "^19.2.4",
- "react-dom": "^19.2.4"
+ "react-dom": "^19.2.4",
+ "react-router-dom": "^7.14.2"
},
"devDependencies": {
"@commitlint/cli": "^20.5.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 900b795..5005590 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ importers:
react-dom:
specifier: ^19.2.4
version: 19.2.4(react@19.2.4)
+ react-router-dom:
+ specifier: ^7.14.2
+ version: 7.14.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
devDependencies:
'@commitlint/cli':
specifier: ^20.5.0
@@ -757,6 +760,10 @@ packages:
convert-source-map@2.0.0:
resolution: {integrity: sha512-Kvp459HrV2FEJ1CAsi1Ku+MY3kasH19TFykTz2xWmMeq6bk2NU3XXvfJ+Q61m0xktWwt+1HSYf3JZsTms3aRJg==}
+ cookie@1.1.1:
+ resolution: {integrity: sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==}
+ engines: {node: '>=18'}
+
cosmiconfig-typescript-loader@6.3.0:
resolution: {integrity: sha512-Akr82WH1Wfqatyiqpj8HDkO2o2KmJRu1FhKfSNJP3K4IdXwHfEyL7MOb62i1AGQVLtIQM+iCE9CGOtrfhR+mmA==}
engines: {node: '>=v18'}
@@ -1290,6 +1297,23 @@ packages:
peerDependencies:
react: ^19.2.4
+ react-router-dom@7.14.2:
+ resolution: {integrity: sha512-YZcM5ES8jJSM+KrJ9BdvHHqlnGTg5tH3sC5ChFRj4inosKctdyzBDhOyyHdGk597q2OT6NTrCA1OvB/YDwfekQ==}
+ engines: {node: '>=20.0.0'}
+ peerDependencies:
+ react: '>=18'
+ react-dom: '>=18'
+
+ react-router@7.14.2:
+ resolution: {integrity: sha512-yCqNne6I8IB6rVCH7XUvlBK7/QKyqypBFGv+8dj4QBFJiiRX+FG7/nkdAvGElyvVZ/HQP5N19wzteuTARXi5Gw==}
+ engines: {node: '>=20.0.0'}
+ peerDependencies:
+ react: '>=18'
+ react-dom: '>=18'
+ peerDependenciesMeta:
+ react-dom:
+ optional: true
+
react@19.2.4:
resolution: {integrity: sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ==}
engines: {node: '>=0.10.0'}
@@ -1335,6 +1359,9 @@ packages:
engines: {node: '>=10'}
hasBin: true
+ set-cookie-parser@2.7.2:
+ resolution: {integrity: sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==}
+
shebang-command@2.0.0:
resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==}
engines: {node: '>=8'}
@@ -2249,6 +2276,8 @@ snapshots:
convert-source-map@2.0.0: {}
+ cookie@1.1.1: {}
+
cosmiconfig-typescript-loader@6.3.0(@types/node@25.6.0)(cosmiconfig@9.0.1(typescript@6.0.3))(typescript@6.0.3):
dependencies:
'@types/node': 25.6.0
@@ -2741,6 +2770,20 @@ snapshots:
react: 19.2.4
scheduler: 0.27.0
+ react-router-dom@7.14.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+ dependencies:
+ react: 19.2.4
+ react-dom: 19.2.4(react@19.2.4)
+ react-router: 7.14.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4)
+
+ react-router@7.14.2(react-dom@19.2.4(react@19.2.4))(react@19.2.4):
+ dependencies:
+ cookie: 1.1.1
+ react: 19.2.4
+ set-cookie-parser: 2.7.2
+ optionalDependencies:
+ react-dom: 19.2.4(react@19.2.4)
+
react@19.2.4: {}
readdirp@5.0.0: {}
@@ -2782,6 +2825,8 @@ snapshots:
semver@7.7.4: {}
+ set-cookie-parser@2.7.2: {}
+
shebang-command@2.0.0:
dependencies:
shebang-regex: 3.0.0
diff --git a/src/App.css b/src/App.css
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/src/App.css
@@ -0,0 +1 @@
+
diff --git a/src/App.jsx b/src/App.jsx
index 831f13c..ab32059 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -4,14 +4,18 @@ import Cart from "./pages/Cart";
import Footer from "./Footer";
import Home from "./pages/Home";
import Navbar from "./Navbar";
+import { Route, Routes } from "react-router-dom";
+import "./App.css";
function App() {
return (
<>
-
-
+
+ } />
+ } />
+
diff --git a/src/Navbar.css b/src/Navbar.css
index 7933fa1..8bd3017 100644
--- a/src/Navbar.css
+++ b/src/Navbar.css
@@ -1,8 +1,11 @@
nav {
font-size: 1rem;
width: 100%;
+ position: sticky;
+ top: 0;
}
-nav button {
+nav button,
+a {
--uno: "bg-none border-none hover:bg-white/20 rounded-md p-2";
}
diff --git a/src/Navbar.jsx b/src/Navbar.jsx
index 8327441..338b68f 100644
--- a/src/Navbar.jsx
+++ b/src/Navbar.jsx
@@ -1,4 +1,5 @@
import "./Navbar.css";
+import { Link } from "react-router-dom";
const Navbar = () => {
const total = 25000;
@@ -21,7 +22,7 @@ const Navbar = () => {
)}
-
+ Total: ${total.toLocaleString("es-CL")}
);
};
diff --git a/src/index.css b/src/index.css
index f5b2667..72c9784 100644
--- a/src/index.css
+++ b/src/index.css
@@ -3,8 +3,9 @@ body {
padding: 0;
}
-#app {
+#root {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 2rem 1fr 2rem;
+ min-height: 100dvh;
}
diff --git a/src/main.jsx b/src/main.jsx
index bd756d1..15d588d 100644
--- a/src/main.jsx
+++ b/src/main.jsx
@@ -4,9 +4,12 @@ import "./index.css";
import App from "./App.jsx";
import "@unocss/reset/tailwind.css";
import "virtual:uno.css";
+import { BrowserRouter } from "react-router-dom";
createRoot(document.getElementById("root")).render(
-
+
+
+
,
);
diff --git a/src/pages/Cart.jsx b/src/pages/Cart.jsx
index 1e28176..7396c2b 100644
--- a/src/pages/Cart.jsx
+++ b/src/pages/Cart.jsx
@@ -4,7 +4,7 @@ import { pizzaCart } from "../pizzas";
const Cart = () => {
const [cart, setCart] = useState(pizzaCart);
return (
-
+ <>
Carrito
{cart.map((pizza) => (
@@ -60,7 +60,7 @@ const Cart = () => {
>
Pagar
-
+
);
};