Skip to content

Commit e556ec7

Browse files
mrdeyroymrdeyroy
committed
feat: redesign blog search with real-time suggestions and tags filtering
1 parent 88b23ee commit e556ec7

5 files changed

Lines changed: 705 additions & 165 deletions

File tree

‎src/components/BlogSearch/BlogSearch.css‎

Lines changed: 397 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,397 @@
1+
.blog-search-wrapper {
2+
position: relative;
3+
width: min(100%, 700px);
4+
margin: 0 auto;
5+
z-index: 50;
6+
font-family: "Inter", sans-serif;
7+
}
8+
9+
.blog-search-input-container {
10+
position: relative;
11+
display: flex;
12+
align-items: center;
13+
background: #ffffff;
14+
border: 2px solid rgba(99, 102, 241, 0.18);
15+
border-radius: 14px;
16+
transition: all 0.2s ease;
17+
box-shadow: 0 10px 30px rgba(99, 102, 241, 0.08);
18+
}
19+
20+
[data-theme="dark"] .blog-search-input-container {
21+
background: #1e293b;
22+
border-color: #334155;
23+
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
24+
}
25+
26+
.blog-search-input-container:focus-within,
27+
.blog-search-input-container.dropdown-open {
28+
border-color: #6366f1;
29+
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.15);
30+
}
31+
32+
[data-theme="dark"] .blog-search-input-container:focus-within,
33+
[data-theme="dark"] .blog-search-input-container.dropdown-open {
34+
border-color: #8b5cf6;
35+
box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.15);
36+
}
37+
38+
.blog-search-icon {
39+
position: absolute;
40+
left: 20px;
41+
width: 20px;
42+
height: 20px;
43+
color: #64748b;
44+
pointer-events: none;
45+
}
46+
47+
[data-theme="dark"] .blog-search-icon {
48+
color: #94a3b8;
49+
}
50+
51+
.blog-search-input {
52+
width: 100%;
53+
height: 56px;
54+
padding: 0 50px 0 52px;
55+
background: transparent;
56+
border: none;
57+
font-size: 16px;
58+
font-weight: 500;
59+
color: #0f172a;
60+
outline: none;
61+
}
62+
63+
[data-theme="dark"] .blog-search-input {
64+
color: #f8fafc;
65+
}
66+
67+
.blog-search-input::placeholder {
68+
color: #94a3b8;
69+
}
70+
71+
.blog-search-clear {
72+
position: absolute;
73+
right: 16px;
74+
display: flex;
75+
align-items: center;
76+
justify-content: center;
77+
width: 28px;
78+
height: 28px;
79+
background: transparent;
80+
border: none;
81+
color: #64748b;
82+
cursor: pointer;
83+
border-radius: 50%;
84+
transition: background 0.2s, color 0.2s;
85+
}
86+
87+
.blog-search-clear:hover {
88+
background: #f1f5f9;
89+
color: #0f172a;
90+
}
91+
92+
[data-theme="dark"] .blog-search-clear:hover {
93+
background: #334155;
94+
color: #f8fafc;
95+
}
96+
97+
.blog-search-clear svg {
98+
width: 18px;
99+
height: 18px;
100+
}
101+
102+
/* Dropdown styling */
103+
.blog-search-dropdown {
104+
position: absolute;
105+
top: calc(100% + 8px);
106+
left: 0;
107+
right: 0;
108+
background: #ffffff;
109+
border-radius: 16px;
110+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
111+
border: 1px solid #e2e8f0;
112+
padding: 16px;
113+
overflow: hidden;
114+
animation: dropdownSlideDown 0.2s ease-out;
115+
text-align: left;
116+
}
117+
118+
[data-theme="dark"] .blog-search-dropdown {
119+
background: #1e293b;
120+
border-color: #334155;
121+
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
122+
}
123+
124+
@keyframes dropdownSlideDown {
125+
from {
126+
opacity: 0;
127+
transform: translateY(-10px);
128+
}
129+
to {
130+
opacity: 1;
131+
transform: translateY(0);
132+
}
133+
}
134+
135+
.blog-search-no-results {
136+
padding: 24px;
137+
text-align: center;
138+
color: #64748b;
139+
font-size: 15px;
140+
}
141+
142+
[data-theme="dark"] .blog-search-no-results {
143+
color: #94a3b8;
144+
}
145+
146+
.blog-search-section {
147+
margin-bottom: 20px;
148+
}
149+
150+
.blog-search-section:last-child {
151+
margin-bottom: 0;
152+
}
153+
154+
.flex-1 {
155+
flex: 1;
156+
min-width: 0;
157+
}
158+
159+
.blog-search-section-title {
160+
font-size: 11px;
161+
font-weight: 700;
162+
color: #64748b;
163+
letter-spacing: 0.05em;
164+
text-transform: uppercase;
165+
margin: 0 0 12px 4px;
166+
}
167+
168+
[data-theme="dark"] .blog-search-section-title {
169+
color: #94a3b8;
170+
}
171+
172+
/* Articles */
173+
.blog-search-articles {
174+
display: grid;
175+
grid-template-columns: repeat(3, 1fr);
176+
gap: 12px;
177+
}
178+
179+
.blog-search-article-card {
180+
display: flex;
181+
flex-direction: column;
182+
background: #f8fafc;
183+
border: 1px solid #e2e8f0;
184+
border-radius: 12px;
185+
overflow: hidden;
186+
text-decoration: none;
187+
transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
188+
cursor: pointer;
189+
}
190+
191+
[data-theme="dark"] .blog-search-article-card {
192+
background: #0f172a;
193+
border-color: #334155;
194+
}
195+
196+
.blog-search-article-card:hover,
197+
.blog-search-article-card.focused {
198+
transform: translateY(-2px);
199+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
200+
border-color: #cbd5e1;
201+
text-decoration: none;
202+
}
203+
204+
[data-theme="dark"] .blog-search-article-card:hover,
205+
[data-theme="dark"] .blog-search-article-card.focused {
206+
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
207+
border-color: #475569;
208+
}
209+
210+
.blog-search-article-img {
211+
width: 100%;
212+
height: 80px;
213+
overflow: hidden;
214+
}
215+
216+
.blog-search-article-img img {
217+
width: 100%;
218+
height: 100%;
219+
object-fit: cover;
220+
transition: transform 0.3s ease;
221+
}
222+
223+
.blog-search-article-card:hover .blog-search-article-img img {
224+
transform: scale(1.05);
225+
}
226+
227+
.blog-search-article-info {
228+
padding: 10px 12px;
229+
}
230+
231+
.blog-search-article-info h5 {
232+
margin: 0 0 6px 0;
233+
font-size: 13px;
234+
font-weight: 600;
235+
color: #0f172a;
236+
line-height: 1.3;
237+
display: -webkit-box;
238+
-webkit-line-clamp: 2;
239+
-webkit-box-orient: vertical;
240+
overflow: hidden;
241+
}
242+
243+
[data-theme="dark"] .blog-search-article-info h5 {
244+
color: #f1f5f9;
245+
}
246+
247+
.blog-search-read-time {
248+
display: flex;
249+
align-items: center;
250+
gap: 4px;
251+
font-size: 11px;
252+
color: #64748b;
253+
}
254+
255+
[data-theme="dark"] .blog-search-read-time {
256+
color: #94a3b8;
257+
}
258+
259+
.blog-search-read-time svg {
260+
width: 12px;
261+
height: 12px;
262+
}
263+
264+
/* Bottom Sections (Tutorials & Tags) */
265+
.blog-search-bottom-sections {
266+
display: flex;
267+
gap: 24px;
268+
padding-top: 16px;
269+
border-top: 1px solid #e2e8f0;
270+
}
271+
272+
[data-theme="dark"] .blog-search-bottom-sections {
273+
border-top-color: #334155;
274+
}
275+
276+
/* Tutorials */
277+
.blog-search-tutorials {
278+
display: flex;
279+
flex-direction: column;
280+
gap: 6px;
281+
}
282+
283+
.blog-search-tutorial-item {
284+
display: flex;
285+
align-items: center;
286+
gap: 12px;
287+
padding: 8px 10px;
288+
border-radius: 8px;
289+
text-decoration: none;
290+
transition: background 0.2s;
291+
}
292+
293+
.blog-search-tutorial-item:hover,
294+
.blog-search-tutorial-item.focused {
295+
background: #f1f5f9;
296+
text-decoration: none;
297+
}
298+
299+
[data-theme="dark"] .blog-search-tutorial-item:hover,
300+
[data-theme="dark"] .blog-search-tutorial-item.focused {
301+
background: #334155;
302+
}
303+
304+
.blog-search-tutorial-icon {
305+
display: flex;
306+
align-items: center;
307+
justify-content: center;
308+
width: 32px;
309+
height: 32px;
310+
background: #e0e7ff;
311+
color: #4f46e5;
312+
border-radius: 8px;
313+
}
314+
315+
[data-theme="dark"] .blog-search-tutorial-icon {
316+
background: #312e81;
317+
color: #818cf8;
318+
}
319+
320+
.blog-search-tutorial-icon svg {
321+
width: 18px;
322+
height: 18px;
323+
}
324+
325+
.blog-search-tutorial-info h5 {
326+
margin: 0 0 2px 0;
327+
font-size: 13px;
328+
font-weight: 500;
329+
color: #0f172a;
330+
white-space: nowrap;
331+
overflow: hidden;
332+
text-overflow: ellipsis;
333+
max-width: 180px;
334+
}
335+
336+
[data-theme="dark"] .blog-search-tutorial-info h5 {
337+
color: #f1f5f9;
338+
}
339+
340+
/* Tags */
341+
.blog-search-tags {
342+
display: flex;
343+
flex-wrap: wrap;
344+
gap: 8px;
345+
}
346+
347+
.blog-search-tag-pill {
348+
display: inline-block;
349+
padding: 6px 12px;
350+
background: #f1f5f9;
351+
color: #475569;
352+
font-size: 12px;
353+
font-weight: 500;
354+
border-radius: 20px;
355+
border: 1px solid transparent;
356+
cursor: pointer;
357+
transition: all 0.2s;
358+
}
359+
360+
[data-theme="dark"] .blog-search-tag-pill {
361+
background: #334155;
362+
color: #cbd5e1;
363+
}
364+
365+
.blog-search-tag-pill:hover,
366+
.blog-search-tag-pill.focused {
367+
background: #e2e8f0;
368+
color: #0f172a;
369+
border-color: #cbd5e1;
370+
}
371+
372+
[data-theme="dark"] .blog-search-tag-pill:hover,
373+
[data-theme="dark"] .blog-search-tag-pill.focused {
374+
background: #475569;
375+
color: #f8fafc;
376+
border-color: #64748b;
377+
}
378+
379+
/* Responsive */
380+
@media (max-width: 768px) {
381+
.blog-search-articles {
382+
grid-template-columns: repeat(2, 1fr);
383+
}
384+
.blog-search-bottom-sections {
385+
flex-direction: column;
386+
gap: 16px;
387+
}
388+
}
389+
390+
@media (max-width: 480px) {
391+
.blog-search-articles {
392+
grid-template-columns: 1fr;
393+
}
394+
.blog-search-tutorial-info h5 {
395+
max-width: 220px;
396+
}
397+
}

0 commit comments

Comments
 (0)