diff --git a/package-lock.json b/package-lock.json index 86d963d..2ae109b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,7 @@ "name": "vannlife", "version": "0.0.0", "dependencies": { + "miragejs": "^0.2.0-alpha.3", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.24.0" @@ -949,6 +950,11 @@ "@jridgewell/sourcemap-codec": "^1.4.14" } }, + "node_modules/@miragejs/pretender-node-polyfill": { + "version": "0.1.2", + "resolved": "https://registry.npmjs.org/@miragejs/pretender-node-polyfill/-/pretender-node-polyfill-0.1.2.tgz", + "integrity": "sha512-M/BexG/p05C5lFfMunxo/QcgIJnMT2vDVCd00wNqK2ImZONIlEETZwWJu1QtLxtmYlSHlCFl3JNzp0tLe7OJ5g==" + }, "node_modules/@nodelib/fs.scandir": { "version": "2.1.5", "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz", @@ -2505,6 +2511,11 @@ "node": ">=0.10.0" } }, + "node_modules/fake-xml-http-request": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/fake-xml-http-request/-/fake-xml-http-request-2.1.2.tgz", + "integrity": "sha512-HaFMBi7r+oEC9iJNpc3bvcW7Z7iLmM26hPDmlb0mFwyANSsOQAtJxbdWsXITKOzZUyMYK0zYCv3h5yDj9TsiXg==" + }, "node_modules/fast-deep-equal": { "version": "3.1.3", "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz", @@ -2950,6 +2961,11 @@ "node": ">=0.8.19" } }, + "node_modules/inflected": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/inflected/-/inflected-2.1.0.tgz", + "integrity": "sha512-hAEKNxvHf2Iq3H60oMBHkB4wl5jn3TPF3+fXek/sRwAB5gP9xWs4r7aweSF95f99HFoz69pnZTcu8f0SIHV18w==" + }, "node_modules/inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -3529,6 +3545,11 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -3598,6 +3619,17 @@ "node": ">=16 || 14 >=14.17" } }, + "node_modules/miragejs": { + "version": "0.2.0-alpha.3", + "resolved": "https://registry.npmjs.org/miragejs/-/miragejs-0.2.0-alpha.3.tgz", + "integrity": "sha512-rcfnEUoOj5NP9xgUTctazWQIyN3ZpB/Wm/pEewLtPOhpDfl4M1kdE9R12IywxJkTtvt0qbx3GrMrF9SncWz0VA==", + "dependencies": { + "@miragejs/pretender-node-polyfill": "^0.1.0", + "inflected": "^2.0.4", + "lodash": "^4.0.0", + "pretender": "^3.4.7" + } + }, "node_modules/ms": { "version": "2.1.2", "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", @@ -4138,6 +4170,15 @@ "node": ">= 0.8.0" } }, + "node_modules/pretender": { + "version": "3.4.7", + "resolved": "https://registry.npmjs.org/pretender/-/pretender-3.4.7.tgz", + "integrity": "sha512-jkPAvt1BfRi0RKamweJdEcnjkeu7Es8yix3bJ+KgBC5VpG/Ln4JE3hYN6vJym4qprm8Xo5adhWpm3HCoft1dOw==", + "dependencies": { + "fake-xml-http-request": "^2.1.2", + "route-recognizer": "^0.3.3" + } + }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", @@ -4393,6 +4434,11 @@ "fsevents": "~2.3.2" } }, + "node_modules/route-recognizer": { + "version": "0.3.4", + "resolved": "https://registry.npmjs.org/route-recognizer/-/route-recognizer-0.3.4.tgz", + "integrity": "sha512-2+MhsfPhvauN1O8KaXpXAOfR/fwe8dnUXVM+xw7yt40lJRfPVQxV6yryZm0cgRvAj5fMF/mdRZbL2ptwbs5i2g==" + }, "node_modules/run-parallel": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz", diff --git a/package.json b/package.json index 5f6d4a6..0cd1f6f 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "preview": "vite preview" }, "dependencies": { + "miragejs": "^0.2.0-alpha.3", "react": "^18.3.1", "react-dom": "^18.3.1", "react-router-dom": "^6.24.0" diff --git a/src/App.jsx b/src/App.jsx index b6e842e..5c83101 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -3,7 +3,7 @@ import { BrowserRouter, Routes, Route, Link } from "react-router-dom"; import Home from "./Components/Home"; import About from "./Components/About"; import Vans from "./Components/Vans"; -// import "./Server" +import "./Server" function App() { return ( diff --git a/src/Components/Button.jsx b/src/Components/Button.jsx new file mode 100644 index 0000000..661a755 --- /dev/null +++ b/src/Components/Button.jsx @@ -0,0 +1,16 @@ +import React from 'react' + +export default function Button({children, type}) { + let background; + if(type === "simple") + background = "bg-orange-button"; + else if(type === "rugged") + background = "bg-green-button"; + else if(type ==="luxury") + background = "bg-black-button"; + else + background = "bg-light-beige" + return ( + + ) +} diff --git a/src/Components/CarInfo.jsx b/src/Components/CarInfo.jsx new file mode 100644 index 0000000..824dc9c --- /dev/null +++ b/src/Components/CarInfo.jsx @@ -0,0 +1,26 @@ +import React from "react"; +import Button from "./Button"; +/** + * { + * id: "1", + * name: "Modest Explorer", + * price: 60, + * description: "The Modest Explorer is a van designed to get you out of the house and into nature. This beauty is equipped with solar panels, a composting toilet, a water tank and kitchenette. The idea is that you can pack up your home and escape for a weekend or even longer!", + * imageUrl: "https://assets.scrimba.com/advanced-react/react-router/modest-explorer.png", + * type: "simple" + * } + */ +export default function CarInfo({ name, price, description, image, type }) { + return ( +
{name}
+${price} / day
+You got the travel plans, we got the travel vans.
Add adventure to your life by joining the #vanlife movement. Rent the perfect van to make your perfect road trip.
diff --git a/src/Components/Vans.jsx b/src/Components/Vans.jsx index 52d91e0..2875bc9 100644 --- a/src/Components/Vans.jsx +++ b/src/Components/Vans.jsx @@ -1,9 +1,49 @@ import React from "react"; +import Button from "./Button"; +import CarInfo from "./CarInfo"; +import Footer from "./Footer"; export default function Vans() { + // useState that hold the Date + const [data, setData] = React.useState([]); + // useEffect to fetch Data + React.useEffect(() => { + fetch("/api/vans") + .then((res) => res.json()) + .then((data) => setData(data.vans)); + }, []); + console.log(data); return ( -Explore our van options
+