Skip to content

Commit 31b7c9c

Browse files
codervivek5codervivek5
authored
Merge pull request #1210 from harshita1611/Harshita
Harshita
2 parents d20e3d3 + 03ab5c4 commit 31b7c9c

File tree

14 files changed

+202
-82
lines changed

14 files changed

+202
-82
lines changed

‎Front-with-React/VigyBag/package-lock.json

+49-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎Front-with-React/VigyBag/package.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,9 @@
1111
},
1212
"dependencies": {
1313
"react": "^18.2.0",
14-
"react-dom": "^18.2.0"
14+
"react-dom": "^18.2.0",
15+
"react-icons": "^5.2.1",
16+
"react-router-dom": "^6.23.1"
1517
},
1618
"devDependencies": {
1719
"@types/react": "^18.2.66",

‎Front-with-React/VigyBag/src/App.css

-42
Original file line numberDiff line numberDiff line change
@@ -1,42 +0,0 @@
1-
#root {
2-
max-width: 1280px;
3-
margin: 0 auto;
4-
padding: 2rem;
5-
text-align: center;
6-
}
7-
8-
.logo {
9-
height: 6em;
10-
padding: 1.5em;
11-
will-change: filter;
12-
transition: filter 300ms;
13-
}
14-
.logo:hover {
15-
filter: drop-shadow(0 0 2em #646cffaa);
16-
}
17-
.logo.react:hover {
18-
filter: drop-shadow(0 0 2em #61dafbaa);
19-
}
20-
21-
@keyframes logo-spin {
22-
from {
23-
transform: rotate(0deg);
24-
}
25-
to {
26-
transform: rotate(360deg);
27-
}
28-
}
29-
30-
@media (prefers-reduced-motion: no-preference) {
31-
a:nth-of-type(2) .logo {
32-
animation: logo-spin infinite 20s linear;
33-
}
34-
}
35-
36-
.card {
37-
padding: 2em;
38-
}
39-
40-
.read-the-docs {
41-
color: #888;
42-
}

‎Front-with-React/VigyBag/src/App.jsx

+19-33
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,21 @@
1-
import { useState } from 'react'
2-
import reactLogo from './assets/react.svg'
3-
import viteLogo from '/vite.svg'
4-
import './App.css'
5-
6-
function App() {
7-
const [count, setCount] = useState(0)
1+
import React from "react";
2+
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
3+
import LandingPage from "./pages/LadingPage";
4+
import Gifts from "./pages/Gifts";
5+
import Categories from "./pages/Categories";
6+
import AboutUs from "./pages/AboutUs";
7+
import Dashboard from "./pages/Dashboard";
88

9+
export default function App() {
910
return (
10-
<>
11-
<div>
12-
<a href="https://vitejs.dev" target="_blank">
13-
<img src={viteLogo} className="logo" alt="Vite logo" />
14-
</a>
15-
<a href="https://react.dev" target="_blank">
16-
<img src={reactLogo} className="logo react" alt="React logo" />
17-
</a>
18-
</div>
19-
<h1>Vite + React</h1>
20-
<div className="card">
21-
<button onClick={() => setCount((count) => count + 1)}>
22-
count is {count}
23-
</button>
24-
<p>
25-
Edit <code>src/App.jsx</code> and save to test HMR
26-
</p>
27-
</div>
28-
<p className="read-the-docs">
29-
Click on the Vite and React logos to learn more
30-
</p>
31-
</>
32-
)
33-
}
34-
35-
export default App
11+
<Router>
12+
<Routes>
13+
<Route path="/" element={<LandingPage />} />
14+
<Route path="/gifts" element={<Gifts />} />
15+
<Route path="/categories" element={<Categories />} />
16+
<Route path="/about" element={<AboutUs />} />
17+
<Route path="/dashboard" element={<Dashboard />} />
18+
</Routes>
19+
</Router>
20+
);
21+
}

‎Front-with-React/VigyBag/src/assets/images/background.png

710 KB
Loading

‎Front-with-React/VigyBag/src/assets/react.svg

-1
This file was deleted.

‎Front-with-React/VigyBag/src/components/Navbar/Navbar.jsx

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
import React from 'react';
2+
import { FaSearch, FaShoppingCart, FaBell, FaUserCircle } from 'react-icons/fa';
3+
import { Link } from 'react-router-dom';
4+
5+
// ...
6+
7+
<Link to="/dashboard">
8+
<FaUserCircle className="mx-2 text-black cursor-pointer size-10" />
9+
<span className="mx-2 text-black font-semibold text-2xl">Hi, Vivek</span>
10+
</Link>
11+
12+
const Navbar = () => {
13+
return (
14+
<nav className="flex items-center justify-between bg-[#fdf1e8] p-4">
15+
{/* Logo and Navigation Links */}
16+
<div className="flex gap-10 items-center">
17+
<img src="" alt="Logo" className="h-10" />
18+
<div className="ml-4">
19+
{/* Home Link */}
20+
<a href="/" className="mx-2 text-black text-2xl font-bold">Home</a>
21+
22+
{/* Gifts Dropdown */}
23+
<div className="inline-block relative">
24+
<a href="/gifts" className="mx-2 text-2xl text-black font-bold">Gifts</a>
25+
</div>
26+
27+
{/* Categories Dropdown */}
28+
<div className="inline-block relative">
29+
<a href="/categories" className="mx-2 text-2xl text-black font-bold">Categories</a>
30+
</div>
31+
32+
{/* About Us Link */}
33+
<a href="/about" className="mx-2 text-2xl text-black font-bold">About Us</a>
34+
</div>
35+
</div>
36+
{/* Search Bar */}
37+
<div className="flex gap-10 items-center rounded-full border-black border-2 bg-gray-200 px-4 py-1">
38+
<input type="text" placeholder="Search" className="bg-transparent outline-none" />
39+
<FaSearch className="text-gray-600" />
40+
</div>
41+
42+
{/* User Actions */}
43+
<div className="flex gap-2 items-center">
44+
<FaShoppingCart className="mx-2 text-black cursor-pointer size-10" />
45+
<FaBell className="mx-2 text-black cursor-pointer size-10" />
46+
<Link to="/dashboard">
47+
<div className='flex'>
48+
<FaUserCircle className="mx-2 text-black cursor-pointer size-10" />
49+
<span className="mx-2 text-black font-semibold text-2xl">Hi, Vivek</span>
50+
</div>
51+
</Link>
52+
</div>
53+
</nav>
54+
);
55+
};
56+
57+
export default Navbar;

‎Front-with-React/VigyBag/src/index.css

+2-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
@tailwind components;
33
@tailwind utilities;
44

5-
:root {
5+
/* :root {
66
font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
77
line-height: 1.5;
88
font-weight: 400;
@@ -69,4 +69,4 @@ button:focus-visible {
6969
button {
7070
background-color: #f9f9f9;
7171
}
72-
}
72+
} */

‎Front-with-React/VigyBag/src/main.jsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,9 @@ import ReactDOM from 'react-dom/client'
33
import App from './App.jsx'
44
import './index.css'
55

6+
67
ReactDOM.createRoot(document.getElementById('root')).render(
7-
<React.StrictMode>
8+
<>
89
<App />
9-
</React.StrictMode>,
10+
</>,
1011
)

‎Front-with-React/VigyBag/src/pages/AboutUs.jsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
import Navbar from "../components/Navbar/Navbar";
3+
4+
function AboutUs() {
5+
return (
6+
<div>
7+
<Navbar />
8+
<h1>About Us</h1>
9+
</div>
10+
);
11+
}
12+
13+
export default AboutUs;

‎Front-with-React/VigyBag/src/pages/Categories.jsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
import Navbar from "../components/Navbar/Navbar";
3+
4+
function Categories() {
5+
return (
6+
<div>
7+
<Navbar />
8+
<h1>Categories</h1>
9+
</div>
10+
);
11+
}
12+
13+
export default Categories;

‎Front-with-React/VigyBag/src/pages/Dashboard.jsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
import Navbar from "../components/Navbar/Navbar";
3+
4+
function Dashboard() {
5+
return (
6+
<div>
7+
<Navbar />
8+
<h1>Dashboard</h1>
9+
</div>
10+
);
11+
}
12+
13+
export default Dashboard;

‎Front-with-React/VigyBag/src/pages/Gifts.jsx

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import React from "react";
2+
import Navbar from "../components/Navbar/Navbar";
3+
4+
function Gifts() {
5+
return (
6+
<div>
7+
<Navbar />
8+
<h1>Gifts</h1>
9+
</div>
10+
);
11+
}
12+
13+
export default Gifts;

‎Front-with-React/VigyBag/src/pages/LadingPage.jsx

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import React from 'react';
2+
import Navbar from "../components/Navbar/Navbar";
3+
import background from "../assets/images/background.png";
4+
5+
function LandingPage() {
6+
return (
7+
<div style={{ backgroundImage: `url(${background})`, backgroundSize: 'cover', height: '100vh', position: 'relative' }}>
8+
<Navbar />
9+
<h1>Welcome to Vigy Bag</h1>
10+
<h1>Your Eco-Friendly</h1>
11+
<h1>Shopping Heaven</h1>
12+
13+
</div>
14+
);
15+
}
16+
17+
export default LandingPage;

0 commit comments

Comments
 (0)