mukeshs/cmc_frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Image error resolve

Browse Source
This commit is contained in:
mukeshs
2025-10-10 20:42:13 +05:30
parent d375cad253
commit 84c674cefd
1 changed files with 49 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/components/blogs/BlogListing.tsx
View File

@ -50,7 +50,7 @@ const BlogListing: React.FC = () => {
}
setFilteredBlogs(filtered);
}, [blogs, selectedCategory, searchQuery]);
}, [blogs, selectedCategory, searchQuery]);
// Load blogs from API
useEffect(() => {
@ -86,7 +86,7 @@ const BlogListing: React.FC = () => {
if (mounted && blogs.length > 0) {
filterBlogs();
}
}, [mounted, filterBlogs]);
}, [mounted, filterBlogs]);
// Handle mount
@ -183,12 +183,13 @@ const BlogListing: React.FC = () => {
</section>
{/* Filters Section */}
<div className="flex justify-end items-center gap-4 max-w-7xl mx-auto px-4 py-8" style={{ backgroundColor: '#fff' }}>
<div className="relative">
<div className="flex flex-col sm:flex-row sm:justify-end items-start sm:items-center gap-4 max-w-7xl mx-auto px-4 py-8 bg-white">
{/* Category Select */}
<div className="relative w-full sm:w-auto">
<select
value={selectedCategory}
onChange={handleCategoryChange}
className="appearance-none bg-gray-100 text-sm border border-blue-900 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:border-blue-900"
className="w-full sm:w-auto appearance-none bg-gray-100 text-sm border border-blue-900 rounded-lg px-4 py-2 pr-8 focus:outline-none focus:border-blue-900"
style={{ color: '#333' }}
>
{categories.map((category, index) => (
@ -204,13 +205,15 @@ const BlogListing: React.FC = () => {
</svg>
</div>
</div>
<div className="relative">
{/* Search Input */}
<div className="relative w-full sm:w-64">
<input
type="text"
value={searchQuery}
onChange={handleSearchChange}
placeholder="Search blogs..."
className="border border-blue-900 rounded-lg px-4 py-2 pl-4 pr-10 text-sm focus:outline-none focus:border-blue-900 w-64 text-gray-700"
className="w-full sm:w-64 border border-blue-900 rounded-lg px-4 py-2 pl-4 pr-10 text-sm focus:outline-none focus:border-blue-900 text-gray-700"
/>
<button className="absolute inset-y-0 right-0 flex items-center px-3 bg-blue-900 rounded-r-lg">
<svg className="w-4 h-4 text-gray-100" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@ -220,6 +223,7 @@ const BlogListing: React.FC = () => {
</div>
</div>
{/* Results Info */}
{(selectedCategory !== 'All Categories' || searchQuery.trim()) && (
<div className="max-w-7xl mx-auto px-4 pb-4">
@ -276,7 +280,7 @@ const BlogListing: React.FC = () => {
alt={blog.title}
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
onError={handleImageError}
/>
/>
</div>
{/* Blog Content */}