diff --git a/index.html b/index.html index 8ae2c90..391f0c5 100644 --- a/index.html +++ b/index.html @@ -1,13 +1,21 @@ - - - - - bevasarlolista - - -
- - - + + + + + + bevasarlolista + + + + + + + + +
+ + + + \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 3b9f514..5c208d9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "version": "0.0.0", "dependencies": { "react": "^19.2.0", - "react-dom": "^19.2.0" + "react-dom": "^19.2.0", + "react-router-dom": "^7.10.1" }, "devDependencies": { "@eslint/js": "^9.39.1", @@ -1628,6 +1629,19 @@ "dev": true, "license": "MIT" }, + "node_modules/cookie": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz", + "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==", + "license": "MIT", + "engines": { + "node": ">=18" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/express" + } + }, "node_modules/cross-spawn": { "version": "7.0.6", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz", @@ -2526,6 +2540,44 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "7.10.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.10.1.tgz", + "integrity": "sha512-gHL89dRa3kwlUYtRQ+m8NmxGI6CgqN+k4XyGjwcFoQwwCWF6xXpOCUlDovkXClS0d0XJN/5q7kc5W3kiFEd0Yw==", + "license": "MIT", + "dependencies": { + "cookie": "^1.0.1", + "set-cookie-parser": "^2.6.0" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + } + } + }, + "node_modules/react-router-dom": { + "version": "7.10.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.10.1.tgz", + "integrity": "sha512-JNBANI6ChGVjA5bwsUIwJk7LHKmqB4JYnYfzFwyp2t12Izva11elds2jx7Yfoup2zssedntwU0oZ5DEmk5Sdaw==", + "license": "MIT", + "dependencies": { + "react-router": "7.10.1" + }, + "engines": { + "node": ">=20.0.0" + }, + "peerDependencies": { + "react": ">=18", + "react-dom": ">=18" + } + }, "node_modules/resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", @@ -2594,6 +2646,12 @@ "semver": "bin/semver.js" } }, + "node_modules/set-cookie-parser": { + "version": "2.7.2", + "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz", + "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==", + "license": "MIT" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index b058adc..171b22a 100644 --- a/package.json +++ b/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "react": "^19.2.0", - "react-dom": "^19.2.0" + "react-dom": "^19.2.0", + "react-router-dom": "^7.10.1" }, "devDependencies": { "@eslint/js": "^9.39.1", diff --git a/src/App.jsx b/src/App.jsx index b34cc37..510b7e0 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -5,6 +5,8 @@ import './App.css' import BevasarloLista from './components/BevasarloLista'; import HozzaAdasForm from './components/HozzaAdasForm'; import Statisztika from './components/Statisztika'; +import { BrowserRouter, Routes, Route } from 'react-router-dom' +import Fooldal from './components/Fooldal'; function App() { /* const [venniKell, setVenniKell] = useState( @@ -51,13 +53,15 @@ function App() { const megvett = venniKell.filter(a => a.megveve).length return ( - <> -

Bevásárlólista

- - - - + + + } /> + } /> + } /> + } /> + + ) } diff --git a/src/components/BevasarloLista.jsx b/src/components/BevasarloLista.jsx index e319edd..ccf2c29 100644 --- a/src/components/BevasarloLista.jsx +++ b/src/components/BevasarloLista.jsx @@ -1,17 +1,23 @@ import React from 'react' import ListaElem from './ListaElem' +import Fomenu from './Fomenu' +import { Link } from 'react-router-dom' -const BevasarloLista = ({aruk, vetelk, torlesk, elemMod}) => { +const BevasarloLista = ({ aruk, vetelk, torlesk, elemMod }) => { return ( -
- {aruk.map((elem,index) => { - //console.log(elem.megveve) - return ( - - ) - }) + <> + + Főoldal +
+ {aruk.map((elem, index) => { + //console.log(elem.megveve) + return ( + + ) + }) } -
+
+ ) } diff --git a/src/components/Fomenu.jsx b/src/components/Fomenu.jsx new file mode 100644 index 0000000..d672677 --- /dev/null +++ b/src/components/Fomenu.jsx @@ -0,0 +1,14 @@ +import React from 'react' +import { Link } from 'react-router-dom' + +const Fomenu = () => { + return ( + + ) +} + +export default Fomenu \ No newline at end of file diff --git a/src/components/Fooldal.jsx b/src/components/Fooldal.jsx new file mode 100644 index 0000000..a1fcd15 --- /dev/null +++ b/src/components/Fooldal.jsx @@ -0,0 +1,16 @@ +import React from 'react' +import Fomenu from './Fomenu' + +const Fooldal = () => { + return ( +
+ +
+

Bevásárlólista

+ +
+
+ ) +} + +export default Fooldal \ No newline at end of file diff --git a/src/components/HozzaAdasForm.jsx b/src/components/HozzaAdasForm.jsx index 9fe6ce5..ffe9281 100644 --- a/src/components/HozzaAdasForm.jsx +++ b/src/components/HozzaAdasForm.jsx @@ -1,10 +1,13 @@ import React, {useState} from 'react' +import Fomenu from './Fomenu' +import { useNavigate } from 'react-router-dom' const HozzaAdasForm = ({hozzaAd}) => { const [nev, setNev] = useState("") const [mennyiseg, setMennyiseg] = useState("") const [egyseg, setEgyseg] = useState("") + const oldalvaltas = useNavigate(); const hozzaAdKezel = (e) => { if (nev==="") return @@ -12,11 +15,13 @@ const HozzaAdasForm = ({hozzaAd}) => { hozzaAd({nev,mennyiseg,egyseg,megjegyzes: "",megveve: false, id: Date.now()}) setNev("") setMennyiseg("") - setEgyseg("") + setEgyseg("") + oldalvaltas("/lista") } return (
+
setNev(e.target.value)} placeholder="Név" /> setMennyiseg(e.target.value)} placeholder="Mennyiség" /> diff --git a/src/components/Statisztika.jsx b/src/components/Statisztika.jsx index 977758d..0063fa4 100644 --- a/src/components/Statisztika.jsx +++ b/src/components/Statisztika.jsx @@ -1,4 +1,5 @@ import React from 'react' +import Fomenu from './Fomenu'; const Statisztika = ({total, megvett}) => { @@ -6,6 +7,7 @@ const Statisztika = ({total, megvett}) => { return (
+