diff --git a/Front-with-React/VigyBag/package-lock.json b/Front-with-React/VigyBag/package-lock.json index d54e1d6c..ab756378 100644 --- a/Front-with-React/VigyBag/package-lock.json +++ b/Front-with-React/VigyBag/package-lock.json @@ -9,7 +9,9 @@ "version": "0.0.0", "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-icons": "^5.2.1", + "react-router-dom": "^6.23.1" }, "devDependencies": { "@types/react": "^18.2.66", @@ -987,6 +989,14 @@ "node": ">=14" } }, + "node_modules/@remix-run/router": { + "version": "1.16.1", + "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.16.1.tgz", + "integrity": "sha512-es2g3dq6Nb07iFxGk5GuHN20RwBZOsuDQN7izWIisUcv9r+d2C5jQxqmgkdebXgReWfiyUabcki6Fg77mSNrig==", + "engines": { + "node": ">=14.0.0" + } + }, "node_modules/@rollup/rollup-android-arm-eabi": { "version": "4.17.2", "resolved": "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.17.2.tgz", @@ -4169,6 +4179,14 @@ "react": "^18.3.1" } }, + "node_modules/react-icons": { + "version": "5.2.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.2.1.tgz", + "integrity": "sha512-zdbW5GstTzXaVKvGSyTaBalt7HSfuK5ovrzlpyiWHAFXndXTdd/1hdDHI4xBM1Mn7YriT6aqESucFl9kEXzrdw==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -4184,6 +4202,36 @@ "node": ">=0.10.0" } }, + "node_modules/react-router": { + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.23.1.tgz", + "integrity": "sha512-fzcOaRF69uvqbbM7OhvQyBTFDVrrGlsFdS3AL+1KfIBtGETibHzi3FkoTRyiDJnWNc2VxrfvR+657ROHjaNjqQ==", + "dependencies": { + "@remix-run/router": "1.16.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8" + } + }, + "node_modules/react-router-dom": { + "version": "6.23.1", + "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.23.1.tgz", + "integrity": "sha512-utP+K+aSTtEdbWpC+4gxhdlPFwuEfDKq8ZrPFU65bbRJY+l706qjR7yaidBpo3MSeA/fzwbXWbKBI6ftOnP3OQ==", + "dependencies": { + "@remix-run/router": "1.16.1", + "react-router": "6.23.1" + }, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": ">=16.8", + "react-dom": ">=16.8" + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", diff --git a/Front-with-React/VigyBag/package.json b/Front-with-React/VigyBag/package.json index 02ba699a..451ded7a 100644 --- a/Front-with-React/VigyBag/package.json +++ b/Front-with-React/VigyBag/package.json @@ -11,7 +11,9 @@ }, "dependencies": { "react": "^18.2.0", - "react-dom": "^18.2.0" + "react-dom": "^18.2.0", + "react-icons": "^5.2.1", + "react-router-dom": "^6.23.1" }, "devDependencies": { "@types/react": "^18.2.66", diff --git a/Front-with-React/VigyBag/src/App.css b/Front-with-React/VigyBag/src/App.css index b9d355df..e69de29b 100644 --- a/Front-with-React/VigyBag/src/App.css +++ b/Front-with-React/VigyBag/src/App.css @@ -1,42 +0,0 @@ -#root { - max-width: 1280px; - margin: 0 auto; - padding: 2rem; - text-align: center; -} - -.logo { - height: 6em; - padding: 1.5em; - will-change: filter; - transition: filter 300ms; -} -.logo:hover { - filter: drop-shadow(0 0 2em #646cffaa); -} -.logo.react:hover { - filter: drop-shadow(0 0 2em #61dafbaa); -} - -@keyframes logo-spin { - from { - transform: rotate(0deg); - } - to { - transform: rotate(360deg); - } -} - -@media (prefers-reduced-motion: no-preference) { - a:nth-of-type(2) .logo { - animation: logo-spin infinite 20s linear; - } -} - -.card { - padding: 2em; -} - -.read-the-docs { - color: #888; -} diff --git a/Front-with-React/VigyBag/src/App.jsx b/Front-with-React/VigyBag/src/App.jsx index b8b8473a..7a9a0c8a 100644 --- a/Front-with-React/VigyBag/src/App.jsx +++ b/Front-with-React/VigyBag/src/App.jsx @@ -1,35 +1,21 @@ -import { useState } from 'react' -import reactLogo from './assets/react.svg' -import viteLogo from '/vite.svg' -import './App.css' - -function App() { - const [count, setCount] = useState(0) +import React from "react"; +import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; +import LandingPage from "./pages/LadingPage"; +import Gifts from "./pages/Gifts"; +import Categories from "./pages/Categories"; +import AboutUs from "./pages/AboutUs"; +import Dashboard from "./pages/Dashboard"; +export default function App() { return ( - <> -
- - Vite logo - - - React logo - -
-

Vite + React

-
- -

- Edit src/App.jsx and save to test HMR -

-
-

- Click on the Vite and React logos to learn more -

- - ) -} - -export default App + + + } /> + } /> + } /> + } /> + } /> + + + ); +} \ No newline at end of file diff --git a/Front-with-React/VigyBag/src/assets/images/background.png b/Front-with-React/VigyBag/src/assets/images/background.png new file mode 100644 index 00000000..ed4ca4a4 Binary files /dev/null and b/Front-with-React/VigyBag/src/assets/images/background.png differ diff --git a/Front-with-React/VigyBag/src/assets/react.svg b/Front-with-React/VigyBag/src/assets/react.svg deleted file mode 100644 index 07ed375c..00000000 --- a/Front-with-React/VigyBag/src/assets/react.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/Front-with-React/VigyBag/src/components/Navbar/Navbar.jsx b/Front-with-React/VigyBag/src/components/Navbar/Navbar.jsx new file mode 100644 index 00000000..3e9ccd1b --- /dev/null +++ b/Front-with-React/VigyBag/src/components/Navbar/Navbar.jsx @@ -0,0 +1,57 @@ +import React from 'react'; +import { FaSearch, FaShoppingCart, FaBell, FaUserCircle } from 'react-icons/fa'; +import { Link } from 'react-router-dom'; + +// ... + + + + Hi, Vivek + + +const Navbar = () => { + return ( + + ); +}; + +export default Navbar; \ No newline at end of file diff --git a/Front-with-React/VigyBag/src/index.css b/Front-with-React/VigyBag/src/index.css index e7d4bb2f..7fc01b7a 100644 --- a/Front-with-React/VigyBag/src/index.css +++ b/Front-with-React/VigyBag/src/index.css @@ -2,7 +2,7 @@ @tailwind components; @tailwind utilities; -:root { +/* :root { font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif; line-height: 1.5; font-weight: 400; @@ -69,4 +69,4 @@ button:focus-visible { button { background-color: #f9f9f9; } -} +} */ diff --git a/Front-with-React/VigyBag/src/main.jsx b/Front-with-React/VigyBag/src/main.jsx index 54b39dd1..c801c362 100644 --- a/Front-with-React/VigyBag/src/main.jsx +++ b/Front-with-React/VigyBag/src/main.jsx @@ -3,8 +3,9 @@ import ReactDOM from 'react-dom/client' import App from './App.jsx' import './index.css' + ReactDOM.createRoot(document.getElementById('root')).render( - + <> - , + , ) diff --git a/Front-with-React/VigyBag/src/pages/AboutUs.jsx b/Front-with-React/VigyBag/src/pages/AboutUs.jsx new file mode 100644 index 00000000..071ac9fa --- /dev/null +++ b/Front-with-React/VigyBag/src/pages/AboutUs.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import Navbar from "../components/Navbar/Navbar"; + +function AboutUs() { + return ( +
+ +

About Us

+
+ ); +} + +export default AboutUs; \ No newline at end of file diff --git a/Front-with-React/VigyBag/src/pages/Categories.jsx b/Front-with-React/VigyBag/src/pages/Categories.jsx new file mode 100644 index 00000000..cd5b6b47 --- /dev/null +++ b/Front-with-React/VigyBag/src/pages/Categories.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import Navbar from "../components/Navbar/Navbar"; + +function Categories() { + return ( +
+ +

Categories

+
+ ); +} + +export default Categories; \ No newline at end of file diff --git a/Front-with-React/VigyBag/src/pages/Dashboard.jsx b/Front-with-React/VigyBag/src/pages/Dashboard.jsx new file mode 100644 index 00000000..15b4150a --- /dev/null +++ b/Front-with-React/VigyBag/src/pages/Dashboard.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import Navbar from "../components/Navbar/Navbar"; + +function Dashboard() { + return ( +
+ +

Dashboard

+
+ ); +} + +export default Dashboard; \ No newline at end of file diff --git a/Front-with-React/VigyBag/src/pages/Gifts.jsx b/Front-with-React/VigyBag/src/pages/Gifts.jsx new file mode 100644 index 00000000..84b05d63 --- /dev/null +++ b/Front-with-React/VigyBag/src/pages/Gifts.jsx @@ -0,0 +1,13 @@ +import React from "react"; +import Navbar from "../components/Navbar/Navbar"; + +function Gifts() { + return ( +
+ +

Gifts

+
+ ); +} + +export default Gifts; \ No newline at end of file diff --git a/Front-with-React/VigyBag/src/pages/LadingPage.jsx b/Front-with-React/VigyBag/src/pages/LadingPage.jsx new file mode 100644 index 00000000..46e414db --- /dev/null +++ b/Front-with-React/VigyBag/src/pages/LadingPage.jsx @@ -0,0 +1,17 @@ +import React from 'react'; +import Navbar from "../components/Navbar/Navbar"; +import background from "../assets/images/background.png"; + +function LandingPage() { + return ( +
+ +

Welcome to Vigy Bag

+

Your Eco-Friendly

+

Shopping Heaven

+ +
+ ); +} + +export default LandingPage; \ No newline at end of file