Skip to content

Commit 0dd8c10

Browse files
author
nirajgiriXD
committedJan 21, 2024
Refactor code
1 parent c5a9841 commit 0dd8c10

File tree

5 files changed

+108
-96
lines changed

5 files changed

+108
-96
lines changed
 

‎index.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/icon" href="/public/logo.png" />
5+
<link rel="icon" type="image/icon" href="/logo.png" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>HamroNepse</title>
88
</head>

‎src/App.tsx

+9-5
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,15 @@ import { Navbar, Services, Banner, Footer } from "./components";
77

88
function App() {
99
return (
10-
<div className="container mx-auto p-10 dark:bg-gray-900">
11-
<Navbar logo={logo} />
12-
<Banner />
13-
<Services />
14-
<Footer logo={logo} />
10+
<div className="dark:bg-gray-900">
11+
<div className="container mx-auto">
12+
<div className="w-100 max-w-screen-xl mx-auto px-5">
13+
<Navbar logo={logo} />
14+
<Banner />
15+
<Services />
16+
<Footer logo={logo} />
17+
</div>
18+
</div>
1519
</div>
1620
);
1721
}

‎src/components/Footer/index.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ interface FooterProp {
66
}
77
const Footer = ({ logo }: FooterProp) => {
88
return (
9-
<footer className="bg-white rounded-lg dark:bg-gray-900 mt-6">
10-
<div className="w-full mx-auto p-4 md:py-8">
9+
<footer className="rounded-lg shadow">
10+
<div className="w-full max-w-screen-xxl mx-auto p-4 md:py-8">
1111
<div className="sm:flex sm:items-center sm:justify-between">
1212
<a
1313
href="#"
@@ -28,7 +28,7 @@ const Footer = ({ logo }: FooterProp) => {
2828
})}
2929
</ul>
3030
</div>
31-
<hr className="my-4 border-gray-200 sm:mx-auto dark:border-gray-200 lg:my-8" />
31+
<hr className="my-6 lg:my-8 border-gray-200 sm:mx-auto dark:border-gray-700" />
3232
<span className="block text-sm text-gray-500 sm:text-center dark:text-gray-400">
3333
© 2024 HamroNepse | All Rights Reserved.
3434
</span>

‎src/components/Navbar/SubMenu.tsx

+3-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,9 @@ const SubMenu = ({
1414
}: SubMenuProps) => {
1515
return (
1616
<div
17-
className={"absolute w-52 top-10 p-4 bg-white rounded drop-shadow-xl z-10 dark:bg-gray-900 dark:border dark:border-white"}
17+
className={
18+
"absolute w-52 top-10 p-4 drop-shadow-xl z-10 dark:border dark:border-white"
19+
}
1820
onMouseOver={handleDropdownMouseOver}
1921
onMouseOut={handleDropdownMouseOut}
2022
>

‎src/components/Navbar/index.tsx

+92-86
Original file line numberDiff line numberDiff line change
@@ -22,105 +22,111 @@ const Navbar = ({ logo }: NavbarProp) => {
2222
};
2323

2424
return (
25-
<div className="flex items-center dark:bg-gray-900 justify-between flex-wrap">
26-
{/* Logo, Title, and Menu */}
27-
<div className="flex items-center">
25+
<div className="pt-6 lg:pt-8">
26+
<div className="flex items-center dark:bg-gray-900 justify-between flex-wrap dark:border-gray-600">
27+
{/* Logo, Title, and Menu */}
2828
<div className="flex items-center">
29-
<img src={logo} alt="Logo" className="h-14 mr-2" />
30-
<span className="text-black font-semibold text-2xl mr-5 md:mr-5 dark:text-white">
31-
HamroNepse
32-
</span>
33-
</div>
34-
35-
{/* Desktop Menu (Home, Contacts, Features, Chart) */}
36-
<ul className="hidden relative lg:flex items-center lg:space-x-6 md:space-x-2">
37-
{navItems.map((navItem, index): React.ReactNode => {
38-
return (
39-
<li key={index}>
40-
<NavItem navItemDetails={navItem} />
41-
</li>
42-
);
43-
})}
44-
</ul>
45-
</div>
29+
<div className="flex items-center">
30+
<img src={logo} alt="Logo" className="h-12 mr-2" />
31+
<span className="text-black font-semibold text-2xl mr-5 md:mr-5 dark:text-white">
32+
HamroNepse
33+
</span>
34+
</div>
4635

47-
{/* Desktop Search Bar and Login Button*/}
48-
<div className="hidden lg:flex items-center space-x-4">
49-
{/* Search Bar */}
50-
<div className="relative">
51-
<SearchBar />
36+
{/* Desktop Menu (Home, Contacts, Features, Chart) */}
37+
<ul className="hidden relative lg:flex items-center lg:space-x-6 md:space-x-2">
38+
{navItems.map((navItem, index): React.ReactNode => {
39+
return (
40+
<li key={index}>
41+
<NavItem navItemDetails={navItem} />
42+
</li>
43+
);
44+
})}
45+
</ul>
5246
</div>
5347

54-
{/* Login Button */}
55-
<button
56-
type="button"
57-
className="text-blue-700 border border-black-700 hover:bg-blue-100 hover:text-white focus:ring-1 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center dark:border-blue-500 dark:bg-white dark:focus:ring-blue-300 dark:hover:bg-blue-100"
58-
>
59-
<svg
60-
className="w-9 h-9 dark:text-white"
61-
aria-hidden="true"
62-
xmlns="http://www.w3.org/2000/svg"
63-
fill="dark"
64-
viewBox="0 0 32 32"
48+
{/* Desktop Search Bar and Login Button*/}
49+
<div className="hidden lg:flex items-center space-x-4">
50+
{/* Search Bar */}
51+
<div className="relative h-12">
52+
<SearchBar />
53+
</div>
54+
55+
{/* Login Button */}
56+
<button
57+
type="button"
58+
className="focus:ring-1 focus:outline-none focus:ring-blue-300 font-medium rounded-full text-sm p-2.5 text-center inline-flex items-center dark:bg-white dark:focus:ring-blue-300 dark:hover:bg-blue-100 h-12 w-12"
6559
>
66-
<path d="M16 15.503A5.041 5.041 0 1 0 16 5.42a5.041 5.041 0 0 0 0 10.083zm0 2.215c-6.703 0-11 3.699-11 5.5v3.363h22v-3.363c0-2.178-4.068-5.5-11-5.5z" />
67-
</svg>
68-
</button>
69-
</div>
60+
<svg
61+
className="w-9 h-9 dark:text-white"
62+
aria-hidden="true"
63+
xmlns="http://www.w3.org/2000/svg"
64+
fill="dark"
65+
viewBox="0 0 32 32"
66+
>
67+
<path d="M16 15.503A5.041 5.041 0 1 0 16 5.42a5.041 5.041 0 0 0 0 10.083zm0 2.215c-6.703 0-11 3.699-11 5.5v3.363h22v-3.363c0-2.178-4.068-5.5-11-5.5z" />
68+
</svg>
69+
</button>
70+
</div>
7071

71-
{/* Toggle for Mobile Menu */}
72-
<div className="lg:hidden flex items-center">
73-
{/* Mobile Menu Toggle Icon */}
74-
<button className="text-black focus:outline-none dark:text-white" onClick={toggleMenu}>
75-
<svg
76-
className="w-6 h-6"
77-
fill="none"
78-
stroke="currentColor"
79-
viewBox="0 0 24 24"
80-
xmlns="http://www.w3.org/2000/svg"
72+
{/* Toggle for Mobile Menu */}
73+
<div className="lg:hidden flex items-center">
74+
{/* Mobile Menu Toggle Icon */}
75+
<button
76+
className="text-black focus:outline-none dark:text-white"
77+
onClick={toggleMenu}
8178
>
82-
<path
83-
strokeLinecap="round"
84-
strokeLinejoin="round"
85-
strokeWidth="2"
86-
d="M4 6h16M4 12h16m-7 6h7"
87-
></path>
88-
</svg>
89-
</button>
90-
</div>
79+
<svg
80+
className="w-6 h-6"
81+
fill="none"
82+
stroke="currentColor"
83+
viewBox="0 0 24 24"
84+
xmlns="http://www.w3.org/2000/svg"
85+
>
86+
<path
87+
strokeLinecap="round"
88+
strokeLinejoin="round"
89+
strokeWidth="2"
90+
d="M4 6h16M4 12h16m-7 6h7"
91+
></path>
92+
</svg>
93+
</button>
94+
</div>
9195

92-
{/* Mobile Menu, Search Bar, and Login Button*/}
93-
<div
94-
className={`lg:hidden w-full mt-2 ${isMenuOpen ? "block" : "hidden"}`}
95-
>
96-
{/* Mobile Menu (Home, Contacts, Features, Chart) */}
96+
{/* Mobile Menu, Search Bar, and Login Button*/}
97+
<div
98+
className={`lg:hidden w-full mt-2 ${isMenuOpen ? "block" : "hidden"}`}
99+
>
100+
{/* Mobile Menu (Home, Contacts, Features, Chart) */}
101+
<hr className="my-3 border-gray-200 sm:mx-auto dark:border-gray-700" />
97102

98-
<ul className="flex flex-col items-start space-y-2 ">
103+
<ul className="flex flex-col items-start space-y-2 ">
104+
{navItems.map(
105+
(navItem, index): React.ReactNode => (
106+
<li key={index}>
107+
<a
108+
href={navItem.href}
109+
className="text-black hover:text-blue-500 dark:text-white"
110+
>
111+
{navItem.label}
112+
</a>
113+
</li>
114+
)
115+
)}
116+
</ul>
99117

100-
{navItems.map(
101-
(navItem, index): React.ReactNode => (
102-
<li key={index}>
103-
<a
104-
href={navItem.href}
105-
className="text-black hover:text-blue-500 dark:text-white"
106-
>
107-
{navItem.label}
108-
</a>
109-
</li>
110-
)
111-
)}
112-
</ul>
118+
{/* Search Bar */}
119+
<div className="relative w-full mt-3 h-12">
120+
<SearchBar />
121+
</div>
113122

114-
{/* Search Bar */}
115-
<div className="relative w-full mt-2">
116-
<SearchBar />
123+
{/* Login Button */}
124+
<button className="px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300">
125+
Login / Signup
126+
</button>
117127
</div>
118-
119-
{/* Login Button */}
120-
<button className="mt-2 px-4 py-2 bg-blue-500 text-white rounded-md hover:bg-blue-600 focus:outline-none focus:ring focus:border-blue-300">
121-
Login / Signup
122-
</button>
123128
</div>
129+
<hr className="my-6 lg:my-8 border-gray-200 sm:mx-auto dark:border-gray-700" />
124130
</div>
125131
);
126132
};

0 commit comments

Comments
 (0)
Please sign in to comment.