Skip to content

Commit 586d095

Browse files
Asfak00Asfak00
committed
update: checkout page responsive & code adding complete
1 parent efe25b9 commit 586d095

File tree

10 files changed

+912
-250
lines changed

10 files changed

+912
-250
lines changed

‎src/Components/Home/Navbar.jsx‎

Lines changed: 61 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -19,32 +19,16 @@ const Navbar = () => {
1919
const [isDeveloperKitHover, setIsDeveloperKitHover] = useState(false);
2020
const [isToolsHover, setIsToolsHover] = useState(false);
2121
const [eCommerceHover, setECommerceHover] = useState(false)
22+
const [isActiveToolsMenu, setIsActiveToolsMenu] = useState(false);
23+
const [isActiveEcommcerMenu, setIsActiveEcommcerMenu] = useState(false);
24+
const [isActiveDeveloperKitMenu, setIsActiveDeveloperKitMenu] = useState(false);
2225

2326
const [searchPlaceholderText, setSearchPlaceholderText] = useState("search component");
2427

2528
const handleSearchClick = () => {
2629
setIsSearchOpen(true);
2730
};
2831

29-
// light and dark mood
30-
const [toggle, setToggle] = useState(
31-
JSON.parse(localStorage.getItem("theme"))
32-
? JSON.parse(localStorage.getItem("theme"))
33-
: false
34-
);
35-
36-
const element = document.documentElement;
37-
38-
localStorage.setItem("theme", JSON.stringify(toggle));
39-
40-
useEffect(() => {
41-
if (toggle) {
42-
element.classList.add("dark");
43-
} else {
44-
element.classList.remove("dark");
45-
}
46-
}, [toggle]);
47-
4832
const getTheRouteName = () => {
4933
return window.location.pathname
5034
}
@@ -104,6 +88,49 @@ const Navbar = () => {
10488
return () => clearInterval(interval);
10589
}, []);
10690

91+
92+
const handleActiveToolsMenu = () => {
93+
setIsActiveToolsMenu(!isActiveToolsMenu)
94+
setIsActiveEcommcerMenu(false)
95+
setIsActiveDeveloperKitMenu(false)
96+
}
97+
98+
const handleActiveDeveloperKitMenu = () => {
99+
setIsActiveDeveloperKitMenu(!isActiveDeveloperKitMenu)
100+
setIsActiveToolsMenu(false)
101+
setIsActiveEcommcerMenu(false)
102+
}
103+
104+
const handleActiveEcommerceMenu = () => {
105+
setIsActiveEcommcerMenu(!isActiveEcommcerMenu)
106+
setIsActiveToolsMenu(false)
107+
setIsActiveDeveloperKitMenu(false)
108+
}
109+
110+
const handleToolsMouseHover = () => {
111+
setIsToolsHover(true)
112+
setIsDeveloperKitHover(false)
113+
setIsActiveEcommcerMenu(false)
114+
setIsActiveDeveloperKitMenu(false)
115+
setECommerceHover(false)
116+
}
117+
118+
const handleDeveloperKitMouseHover = () => {
119+
setIsToolsHover(false)
120+
setIsDeveloperKitHover(true)
121+
setIsActiveToolsMenu(false)
122+
setIsActiveEcommcerMenu(false)
123+
setECommerceHover(false)
124+
}
125+
126+
const handleEcommerceMouseHover = () => {
127+
setIsToolsHover(false)
128+
setIsDeveloperKitHover(false)
129+
setIsActiveToolsMenu(false)
130+
setIsActiveDeveloperKitMenu(false)
131+
setECommerceHover(true)
132+
}
133+
107134
return (
108135
<>
109136
<nav
@@ -132,14 +159,15 @@ const Navbar = () => {
132159
<ul className={`text-gray-600 flex items-center gap-8 font-[500] capitalize text-[1.2rem]`}>
133160
<Link to='/about-us' className='cursor-pointer hover:text-[#0FABCA] transition-all duration-200'>About Us</Link>
134161
<li
135-
onMouseEnter={() => setIsToolsHover(true)}
162+
onMouseEnter={handleToolsMouseHover}
136163
onMouseLeave={() => setIsToolsHover(false)}
137-
className='cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]'
164+
onClick={handleActiveToolsMenu}
165+
className={`${isActiveToolsMenu && 'text-[#0FABCA]'} cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]`}
138166
>
139167
Tools
140-
<IoIosArrowDown className={`${isToolsHover ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
168+
<IoIosArrowDown className={`${(isToolsHover || isActiveToolsMenu) ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
141169

142-
{isToolsHover && (
170+
{(isToolsHover || isActiveToolsMenu) && (
143171
<motion.div
144172
initial={{opacity: 0, scale: 0.8}}
145173
animate={{opacity: 1, scale: 1}}
@@ -183,14 +211,15 @@ const Navbar = () => {
183211
</li>
184212

185213
<li
186-
onMouseEnter={() => setIsDeveloperKitHover(true)}
214+
onMouseEnter={handleDeveloperKitMouseHover}
187215
onMouseLeave={() => setIsDeveloperKitHover(false)}
188-
className='cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]'
216+
onClick={handleActiveDeveloperKitMenu}
217+
className={`${isActiveDeveloperKitMenu && 'text-[#0FABCA]'} cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]`}
189218
>
190219
Components
191-
<IoIosArrowDown className={`${isDeveloperKitHover ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
220+
<IoIosArrowDown className={`${(isDeveloperKitHover || isActiveDeveloperKitMenu) ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
192221

193-
{isDeveloperKitHover && (
222+
{(isDeveloperKitHover || isActiveDeveloperKitMenu) && (
194223
<motion.div
195224
initial={{opacity: 0, scale: 0.8}}
196225
animate={{opacity: 1, scale: 1}}
@@ -237,16 +266,17 @@ const Navbar = () => {
237266
</li>
238267

239268
<li
240-
onMouseEnter={() => setECommerceHover(true)}
269+
onMouseEnter={handleEcommerceMouseHover}
241270
onMouseLeave={() => setECommerceHover(false)}
242-
className='cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]'
271+
onClick={handleActiveEcommerceMenu}
272+
className={`${isActiveEcommcerMenu && 'text-[#0FABCA]'} cursor-pointer relative py-[23px] hover:text-[#0FABCA] transition-all duration-200 flex items-center gap-[8px]`}
243273
>
244274
E-Commerce
245275
<NewBadge/>
246276
<div className='w-[8px] h-[8px] bg-green-500 rounded-full absolute top-5 right-6 animate-[ping_1.5s_linear_infinite]'></div>
247-
<IoIosArrowDown className={`${eCommerceHover ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
277+
<IoIosArrowDown className={`${(eCommerceHover|| isActiveEcommcerMenu) ? 'rotate-[180deg]': 'rotate-0'} transition-all duration-300`}/>
248278

249-
{eCommerceHover && (
279+
{(eCommerceHover||isActiveEcommcerMenu) && (
250280
<motion.div
251281
initial={{opacity: 0, scale: 0.8}}
252282
animate={{opacity: 1, scale: 1}}

‎src/Components/Home/feedback.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ const Feedback = () => {
5858
</div>
5959

6060
{/* bottom shadow card */}
61-
<div className='w-full h-[100px] 640px:h-[300px] bg-gradient-to-t from-white top-[rgb(255,255,255,0.8)] absolute bottom-8 left-0 right-0'></div>
61+
<div className='w-full h-[100px] 640px:h-[300px] z-10 bg-gradient-to-t from-white top-[rgb(255,255,255,0.8)] absolute bottom-8 left-0 right-0'></div>
6262
</section>
6363
);
6464
};

‎src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample1.jsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -22,18 +22,18 @@ const CheckoutPageExample1 = () => {
2222
const cities = ["Los Angeles", "Toronto", "Mumbai", "Sydney", "London"];
2323

2424
return (
25-
<div className="grid gap-8 grid-cols-3 w-full">
25+
<div className="grid gap-8 grid-cols-1 1024px:grid-cols-3 w-full">
2626

2727
{/* Billing and Payment Form */}
28-
<div className="col-span-2 space-y-8 w-full">
28+
<div className="1024px:col-span-2 space-y-8 w-full">
2929

3030
{/* Billing Information */}
3131
<div className='w-full'>
3232
<h2 className="text-[1.5rem] font-medium text-gray-700 mb-6">Billing Information</h2>
3333

3434
<div className="grid grid-cols-1 gap-[16px]">
35-
<div className='flex items-center gap-4'>
36-
<div className='w-[50%]'>
35+
<div className='flex flex-col 1024px:flex-row items-center gap-4'>
36+
<div className='w-full 1024px:w-[50%]'>
3737
<label htmlFor="firstName" className={`${labelStyles}`}>
3838
First name
3939
</label>
@@ -44,7 +44,7 @@ const CheckoutPageExample1 = () => {
4444
className={`${inputStyles}`}
4545
/>
4646
</div>
47-
<div className='w-[50%]'>
47+
<div className='w-full 1024px:w-[50%]'>
4848
<label htmlFor="lastName" className={`${labelStyles}`}>
4949
Last name
5050
</label>
@@ -79,28 +79,28 @@ const CheckoutPageExample1 = () => {
7979
/>
8080
</div>
8181

82-
<div className='flex items-center gap-4 w-full'>
83-
<div className='w-[50%]'>
82+
<div className='flex flex-col 1024px:flex-row items-center gap-4 w-full'>
83+
<div className='w-full 1024px:w-[50%]'>
8484
<label htmlFor="country" className={`${labelStyles}`}>
8585
Country
8686
</label>
8787
<InputSelect items={countries}/>
8888
</div>
89-
<div className='w-[50%]'>
89+
<div className='w-full 1024px:w-[50%]'>
9090
<label htmlFor="state" className={`${labelStyles}`}>
9191
Region/State
9292
</label>
9393
<InputSelect items={regions}/>
9494
</div>
9595
</div>
96-
<div className='flex items-center gap-4 w-full'>
97-
<div className='w-[50%]'>
96+
<div className='flex flex-col 1024px:flex-row items-center gap-4 w-full'>
97+
<div className='w-full 1024px:w-[50%]'>
9898
<label htmlFor="city" className={`${labelStyles}`}>
9999
City
100100
</label>
101101
<InputSelect items={cities}/>
102102
</div>
103-
<div className='w-[50%]'>
103+
<div className='w-full 1024px:w-[50%]'>
104104
<label htmlFor="zipCode" className={`${labelStyles}`}>
105105
Zip Code
106106
</label>
@@ -113,8 +113,8 @@ const CheckoutPageExample1 = () => {
113113
</div>
114114
</div>
115115

116-
<div className='flex items-center gap-4 w-full'>
117-
<div className='w-[50%]'>
116+
<div className='flex flex-col 1024px:flex-row items-center gap-4 w-full'>
117+
<div className='w-full 1024px:w-[50%]'>
118118
<label htmlFor="email" className={`${labelStyles}`}>
119119
Email
120120
</label>
@@ -125,7 +125,7 @@ const CheckoutPageExample1 = () => {
125125
className={`${inputStyles}`}
126126
/>
127127
</div>
128-
<div className='w-[50%]'>
128+
<div className='w-full 1024px:w-[50%]'>
129129
<label htmlFor="phone" className={`${labelStyles}`}>
130130
Phone Number
131131
</label>
@@ -176,7 +176,7 @@ const CheckoutPageExample1 = () => {
176176
{/* Payment Options */}
177177
<div className='border border-gray-200 rounded-md'>
178178
<h2 className="text-[1.2rem] font-medium text-gray-700 border-b border-gray-200 px-5 py-3">Payment Option</h2>
179-
<div className="grid grid-cols-2 gap-4 w-full p-5">
179+
<div className="grid grid-cols-1 1024px:grid-cols-2 gap-4 w-full p-5">
180180
<button
181181
onClick={() => setSelectedPayment('cash')}
182182
className={`flex flex-col items-center justify-center p-4 border rounded-lg ${

‎src/Components/Overview/SidebarContent/Blocks/E-Commerce/CheckoutPages/CheckoutPageExample2.jsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -3,17 +3,17 @@ import {AiOutlinePlus} from "react-icons/ai";
33

44
const CheckoutPageExample2 = () => {
55
return (
6-
<div className="w-full flex">
6+
<div className="w-full flex flex-col gap-8 1024px:gap-0 1024px:flex-row">
77

88
{/* Left Column - Order Summary */}
9-
<div className='bg-gray-50 rounded-md p-8 flex-1'>
9+
<div className='bg-gray-50 rounded-md p-4 1024px:p-8 flex-1'>
1010

1111
{/* order summery */}
1212
<div>
1313
<h2 className="text-[1.2rem] text-gray-700 font-semibold mb-6">Your order</h2>
1414
<div className="border border-gray-200 rounded-md">
15-
<div className="flex items-center gap-4 p-4">
16-
<div className='border relative border-gray-200 rounded-md bg-white'>
15+
<div className="flex flex-col 1024px:flex-row 1024px:items-center gap-4 p-4">
16+
<div className='border relative border-gray-200 w-max rounded-md bg-white'>
1717
<img src="https://i.ibb.co.com/x6fq6nC/Rectangle-516.png" alt="Nike Air Zoom Pegasus 39"
1818
className="w-20 h-20 object-cover rounded"/>
1919

@@ -30,8 +30,8 @@ const CheckoutPageExample2 = () => {
3030
</div>
3131
<span className="font-medium">$28.00</span>
3232
</div>
33-
<div className="flex items-center gap-4 border-t p-4 border-gray-200">
34-
<div className='border relative border-gray-200 rounded-md bg-white'>
33+
<div className="flex flex-col 1024px:flex-row 1024px:items-center gap-4 border-t p-4 border-gray-200">
34+
<div className='border relative border-gray-200 w-max rounded-md bg-white'>
3535
<img src="https://i.ibb.co.com/VJKrBt5/Rectangle-519.png"
3636
alt="Nike React Pegasus Trail 4"
3737
className="w-20 h-20 object-cover rounded"/>
@@ -84,7 +84,7 @@ const CheckoutPageExample2 = () => {
8484
</div>
8585

8686
{/* Right Column - Checkout Form */}
87-
<div className="flex-1 px-8">
87+
<div className="flex-1 1024px:px-8">
8888
<form className="space-y-6">
8989
<div>
9090
<label htmlFor="email"
@@ -121,7 +121,7 @@ const CheckoutPageExample2 = () => {
121121
Add new
122122
</button>
123123
</div>
124-
<div className="flex w-full gap-4">
124+
<div className="flex flex-col 1024px:flex-row w-full gap-4">
125125
<label
126126
className="flex-1 flex items-center justify-between gap-2 border-gray-200 border rounded-lg p-4">
127127
<div>
@@ -180,7 +180,7 @@ const CheckoutPageExample2 = () => {
180180
<option>South Africa</option>
181181
</select>
182182
</div>
183-
<div className="grid grid-cols-2 gap-4">
183+
<div className="grid grid-cols-1 1024px:grid-cols-2 gap-4">
184184
<div>
185185
<label htmlFor="zipCode" className="text-[1rem] font-medium text-gray-800 mb-1">Zip
186186
code</label>

0 commit comments

Comments
 (0)