Skip to content

Commit f01f700

Browse files
lakshay2425lakshay2425
committed
Add responsiveness to components
1 parent 2402f9d commit f01f700

File tree

4 files changed

+47
-70
lines changed

4 files changed

+47
-70
lines changed

‎features/bookDetailsSlice.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export const fetchBooks = createAsyncThunk(
1616
try {
1717
const { book } = getState();
1818
if (!book.bookFetched && book.booksInfo.length === 0) {
19-
const response = await axiosInstance.get(`${import.meta.env.VITE_BACKEND_URL}/books`);
19+
const response = await axiosInstance.get(`/books`);
2020
return response.data.data;
2121
}
2222
return book.booksInfo;
@@ -32,7 +32,7 @@ export const fetchRecommendedBooks = createAsyncThunk(
3232
try{
3333
const {book } = getState();
3434
if(!book.fetchRecommendedBooks && book.recommendedBooksInfo.length === 0){
35-
const response = await axiosInstance.get(`${import.meta.env.VITE_BACKEND_URL}/recommendedBooks`);
35+
const response = await axiosInstance.get(`/recommendedBooks`);
3636
return response.data.data;
3737
}
3838
return book.recommendedBooksInfo;

‎src/Components/Features/Forms/Login.jsx‎

Lines changed: 18 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -153,52 +153,36 @@ const Login = () => {
153153
{isLoading ? (
154154
<Loader />
155155
) : (
156-
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
157-
<div className="bg-white rounded-2xl p-8 max-w-md w-full shadow-2xl relative">
156+
<div className="min-h-screen bg-gray-50 flex items-center justify-center p-2 sm:p-4"> {/* Responsive padding */}
157+
<div className="bg-white rounded-xl sm:rounded-2xl p-4 sm:p-6 md:p-8 w-full max-w-[320px] sm:max-w-md shadow-lg sm:shadow-2xl relative"> {/* Responsive width, padding and rounded corners */}
158158
{/* Header */}
159-
<div className="text-center mb-6">
160-
<div className="inline-flex items-center justify-center w-12 h-12 bg-black rounded-full mb-4">
161-
<BookOpen className="text-white text-xl" />
159+
<div className="text-center mb-4 sm:mb-6"> {/* Responsive margin */}
160+
<div className="inline-flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 bg-black rounded-full mb-3 sm:mb-4"> {/* Responsive size */}
161+
<BookOpen className="text-white text-lg sm:text-xl" /> {/* Responsive icon */}
162162
</div>
163-
<h2 className="text-2xl font-bold text-black font-serif">
163+
<h2 className="text-xl sm:text-2xl font-bold text-black font-serif"> {/* Responsive text */}
164164
{'Welcome back'}
165165
</h2>
166-
<p className="text-gray-600 mt-2 font-serif">
166+
<p className="text-sm sm:text-base text-gray-600 mt-1 sm:mt-2 font-serif"> {/* Responsive text and margin */}
167167
{'Sign in to your account'}
168168
</p>
169169
</div>
170170

171171
{/* Social Login Buttons */}
172-
<div className="space-y-3 mb-6">
172+
<div className="space-y-3 mb-4 sm:mb-6"> {/* Responsive margin */}
173173
<button
174174
onClick={handleGoogleLogin}
175-
className="w-full flex items-center justify-center gap-3 bg-white border border-gray-300 rounded-lg px-4 py-3 text-gray-700 hover:bg-gray-50 transition-colors"
175+
className="w-full flex items-center justify-center gap-2 sm:gap-3 bg-white border border-gray-300 rounded-lg px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base text-gray-700 hover:bg-gray-50 transition-colors"
176176
>
177-
<svg className="w-5 h-5" viewBox="0 0 24 24">
178-
<path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" />
179-
<path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" />
180-
<path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z" />
181-
<path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" />
182-
</svg>
177+
{/* Google icon */}
183178
Continue with Google
184179
</button>
185180
</div>
186181

187-
{/* Divider */}
188-
<div className="relative mb-6">
189-
<div className="absolute inset-0 flex items-center">
190-
<div className="w-full border-t border-gray-300"></div>
191-
</div>
192-
<div className="relative flex justify-center text-sm">
193-
<span className="px-2 bg-white text-gray-500">or</span>
194-
</div>
195-
</div>
196-
197182
{/* Form */}
198-
<div className="space-y-4">
199-
183+
<div className="space-y-3 sm:space-y-4"> {/* Responsive spacing */}
200184
<input
201-
className="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
185+
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
202186
type="gmail"
203187
id="email"
204188
name="email"
@@ -210,7 +194,7 @@ const Login = () => {
210194

211195
<div className="relative">
212196
<input
213-
className="w-full px-4 py-3 pr-12 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
197+
className="w-full px-3 sm:px-4 py-2.5 sm:py-3 pr-10 sm:pr-12 text-sm sm:text-base border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none"
214198
type={showPassword ? "text" : "password"}
215199
id="password"
216200
name="password"
@@ -226,29 +210,22 @@ const Login = () => {
226210
>
227211
{showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
228212
</button>
213+
{/* Password toggle button */}
229214
<p className="text-xs text-gray-500 mt-1">Password must be at least 8 characters</p>
230215
</div>
231216

232217
<button
233218
type="button"
234219
onClick={handleSubmit}
235220
disabled={isLoading}
236-
className="w-full bg-black text-white rounded-lg px-4 py-3 font-semibold hover:bg-gray-800 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
221+
className="w-full bg-black text-white rounded-lg px-3 sm:px-4 py-2.5 sm:py-3 text-sm sm:text-base font-semibold hover:bg-gray-800 transition-all disabled:opacity-50 disabled:cursor-not-allowed"
237222
>
238-
{isLoading ? (
239-
<div className="flex items-center justify-center space-x-2">
240-
<div className="w-5 h-5 border-2 border-white border-t-transparent rounded-full animate-spin"></div>
241-
<span>{'Signing in...'}</span>
242-
</div>
243-
) : (
244-
'Sign in'
245-
)}
223+
{/* Button content */}
246224
</button>
247225
</div>
248226

249-
250-
<div className="text-center mt-6">
251-
<p className="text-gray-600">
227+
<div className="text-center mt-4 sm:mt-6"> {/* Responsive margin */}
228+
<p className="text-sm sm:text-base text-gray-600"> {/* Responsive text */}
252229
{"Don't have an account? "}
253230
<button
254231
onClick={() => navigate("/Signup")}

‎src/Components/Navbar/Navbar.jsx‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -97,13 +97,13 @@ var Navbar = () => {
9797
return (
9898
<>
9999
<nav className="bg-white/95 backdrop-blur-md border-b border-gray-200 sticky top-0 z-50 shadow-sm">
100-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
101-
<div className="flex items-center justify-between h-16">
100+
<div className="max-w-7xl mx-auto px-3 sm:px-4 md:px-6 lg:px-8">
101+
<div className="flex items-center justify-between h-16 md:h-18">
102102
{/* Logo */}
103103
<div className="flex-shrink-0">
104-
<Link to="/" className="flex items-center space-x-2">
104+
<Link to="/" className="flex items-center space-x-1 sm:space-x-2">
105105
<div className="bg-gradient-to-r from-blue-600 to-purple-600 p-2 rounded-lg">
106-
<Book className="w-6 h-6 text-white" />
106+
<Book className="w-5 h-5 sm:w-6 sm:h-6 text-white" />
107107
</div>
108108
<span className="text-xl font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
109109
Knowledge Store
@@ -112,7 +112,7 @@ var Navbar = () => {
112112
</div>
113113

114114
{/* Desktop Navigation */}
115-
<div className="hidden md:flex items-center space-x-8">
115+
<div className="hidden md:flex items-center space-x-4 lg:space-x-8">
116116
{/* Categories Dropdown */}
117117
<div className="relative">
118118
<button
@@ -171,7 +171,7 @@ var Navbar = () => {
171171
</div>
172172

173173
{/* Search Bar */}
174-
<div className="hidden md:flex flex-1 max-w-md mx-8">
174+
<div className="hidden md:flex flex-1 max-w-xs lg:max-w-md mx-4 lg:mx-8">
175175
<div className="w-full">
176176
<form onSubmit={handleSubmit}>
177177
<div className="relative">
@@ -195,7 +195,7 @@ var Navbar = () => {
195195
</div>
196196

197197
{/* Right Side Actions */}
198-
<div className="flex items-center space-x-4">
198+
<div className="flex items-center space-x-1 sm:space-x-3">
199199
{/* When not logged in - show Login/Register buttons */}
200200
{!isAuthenticated && (
201201
<div className="flex items-center space-x-3">
@@ -294,14 +294,14 @@ var Navbar = () => {
294294
{/* Mobile Menu */}
295295
<div className={`md:hidden fixed inset-0 z-40 transition-all duration-300 ${isOpen ? 'visible' : 'invisible'}`}>
296296
<div className={`absolute inset-0 bg-black/50 transition-opacity duration-300 ${isOpen ? 'opacity-100' : 'opacity-0'}`} onClick={toggleMenu} />
297-
<div className={`absolute top-0 right-0 w-80 h-full bg-white shadow-xl transform transition-transform duration-300 ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}>
298-
<div className="p-6">
299-
<div className="flex items-center justify-between mb-8">
300-
<div className="flex items-center space-x-2">
301-
<div className="bg-gradient-to-r from-blue-600 to-purple-600 p-2 rounded-lg">
302-
<Book className="w-5 h-5 text-white" />
297+
<div className={`absolute top-0 right-0 w-64 sm:w-80 h-full bg-white shadow-xl transform transition-transform duration-300 overflow-y-auto ${isOpen ? 'translate-x-0' : 'translate-x-full'}`}> {/* Added overflow-y-auto and responsive width */}
298+
<div className="p-4 sm:p-6"> {/* Responsive padding */}
299+
<div className="flex items-center justify-between mb-6 sm:mb-8"> {/* Responsive margin */}
300+
<div className="flex items-center space-x-1 sm:space-x-2"> {/* Responsive spacing */}
301+
<div className="bg-gradient-to-r from-blue-600 to-purple-600 p-1.5 sm:p-2 rounded-lg">
302+
<Book className="w-4 h-4 sm:w-5 sm:h-5 text-white" /> {/* Responsive icon size */}
303303
</div>
304-
<span className="text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
304+
<span className="text-base sm:text-lg font-bold bg-gradient-to-r from-blue-600 to-purple-600 bg-clip-text text-transparent">
305305
Knowledge Store
306306
</span>
307307
</div>
@@ -311,7 +311,7 @@ var Navbar = () => {
311311
</div>
312312

313313
{/* Mobile Search */}
314-
<div className="mb-8">
314+
<div className="mb-6 sm:mb-8"> {/* Responsive margin */}
315315
<div className="w-full">
316316
<form onSubmit={handleSubmit}>
317317
<div className="relative">
@@ -335,7 +335,7 @@ var Navbar = () => {
335335
</div>
336336

337337
{/* Mobile Navigation */}
338-
<div className="space-y-6">
338+
<div className="space-y-4 sm:space-y-6"> {/* Responsive spacing */}
339339
{/* Categories */}
340340
<div>
341341
<h3 className="text-sm font-semibold text-gray-900 uppercase tracking-wide mb-3">Categories</h3>

‎src/Components/utils/ProductCard.jsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,37 +6,37 @@ const ProductCard = ({ books }) => {
66
const navigate = useNavigate();
77
return (
88
<>
9-
{books.map((book, index) => (
10-
<div key={book.id || index} className="product-card">
11-
<div className="product-image-container">
9+
{books.map((book, index) => (
10+
<div key={book.id || index} className="flex flex-col w-full min-w-[200px] max-w-full sm:max-w-[280px] mx-auto mb-8 rounded-xl bg-white shadow-sm hover:shadow-lg transition-all duration-300 hover:-translate-y-1 overflow-hidden"> {/* Responsive width */}
11+
<div className="relative w-full h-[200px] sm:h-[250px] md:h-[320px] overflow-hidden bg-gray-100 rounded-t-xl"> {/* Responsive height */}
1212
<img
1313
src={book.imageLink}
1414
alt={book.title}
15-
className="product-image"
15+
className="w-full h-full object-cover object-center transition-transform duration-300 hover:scale-105"
1616
/>
1717
</div>
1818

19-
<div className="product-info">
20-
<span className="product-category">
19+
<div className="p-3 sm:p-4 md:p-5 flex-grow flex flex-col justify-between"> {/* Responsive padding */}
20+
<span className="inline-block text-xs sm:text-sm font-semibold text-blue-600 bg-blue-50 px-2 py-1 rounded-full mb-2 sm:mb-3 uppercase tracking-wide">
2121
{book.genres}
2222
</span>
2323

24-
<h3 className="product-title">
24+
<h3 className="text-base sm:text-lg font-semibold text-gray-800 mb-1 sm:mb-2 line-clamp-2 min-h-[2.5rem] sm:min-h-[2.8rem]">
2525
{book.title}
2626
</h3>
2727

28-
<p className="product-author">
28+
<p className="text-sm text-gray-600 mb-3 sm:mb-4 font-medium">
2929
{book.author}
3030
</p>
3131

32-
<div className="product-footer">
33-
<span className="product-price">
32+
<div className="flex items-center justify-between mt-auto">
33+
<span className="text-lg sm:text-xl font-bold text-gray-900">
3434
₹{book.price}
3535
</span>
3636

3737
<button onClick={() => {
3838
navigate(`/${book.title}`, {state: book});
39-
}} className="px-6 py-2 bg-gray-900 text-white rounded-full hover:bg-blue-600 transition-colors duration-300 font-medium">
39+
}} className="px-3 sm:px-6 py-1.5 sm:py-2 text-xs sm:text-sm bg-gray-900 text-white rounded-full hover:bg-blue-600 transition-colors duration-300 font-medium">
4040
See More
4141
</button>
4242
</div>

0 commit comments

Comments
 (0)