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

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

@ -1,6 +1,6 @@
// components/BlogListing.tsx // components/BlogListing.tsx
'use client'; 'use client';
import { useState, useEffect, useCallback } from 'react'; import { useState, useEffect, useCallback } from 'react';
import Image from 'next/image'; import Image from 'next/image';
import Link from 'next/link'; import Link from 'next/link';
import { ChevronRight } from 'lucide-react'; import { ChevronRight } from 'lucide-react';
@ -26,31 +26,31 @@ const BlogListing: React.FC = () => {
// Filter blogs based on category and search query // Filter blogs based on category and search query
const filterBlogs = useCallback(() => { const filterBlogs = useCallback(() => {
let filtered = blogs; let filtered = blogs;
if (selectedCategory !== 'All Categories') { if (selectedCategory !== 'All Categories') {
filtered = filtered.filter(blog => filtered = filtered.filter(blog =>
blog.tags.some(tag => blog.tags.some(tag =>
tag.toLowerCase().includes(selectedCategory.toLowerCase()) tag.toLowerCase().includes(selectedCategory.toLowerCase())
) )
); );
} }
if (searchQuery.trim()) { if (searchQuery.trim()) {
const query = searchQuery.toLowerCase().trim(); const query = searchQuery.toLowerCase().trim();
filtered = filtered.filter(blog => filtered = filtered.filter(blog =>
blog.title.toLowerCase().includes(query) || blog.title.toLowerCase().includes(query) ||
blog.excerpt.toLowerCase().includes(query) || blog.excerpt.toLowerCase().includes(query) ||
blog.tags.some(tag => tag.toLowerCase().includes(query)) || blog.tags.some(tag => tag.toLowerCase().includes(query)) ||
(blog.professors && blog.professors.some(prof => (blog.professors && blog.professors.some(prof =>
prof.firstName?.toLowerCase().includes(query) || prof.firstName?.toLowerCase().includes(query) ||
prof.name?.toLowerCase().includes(query) prof.name?.toLowerCase().includes(query)
)) ))
); );
} }
setFilteredBlogs(filtered); setFilteredBlogs(filtered);
}, [blogs, selectedCategory, searchQuery]); }, [blogs, selectedCategory, searchQuery]);
// Load blogs from API // Load blogs from API
useEffect(() => { useEffect(() => {
@ -83,10 +83,10 @@ const BlogListing: React.FC = () => {
// Filter blogs when category or search changes // Filter blogs when category or search changes
useEffect(() => { useEffect(() => {
if (mounted && blogs.length > 0) { if (mounted && blogs.length > 0) {
filterBlogs(); filterBlogs();
} }
}, [mounted, filterBlogs]); }, [mounted, filterBlogs]);
// Handle mount // Handle mount
@ -183,12 +183,13 @@ const BlogListing: React.FC = () => {
</section> </section>
{/* Filters 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="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">
<div className="relative"> {/* Category Select */}
<div className="relative w-full sm:w-auto">
<select <select
value={selectedCategory} value={selectedCategory}
onChange={handleCategoryChange} 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' }} style={{ color: '#333' }}
> >
{categories.map((category, index) => ( {categories.map((category, index) => (
@ -204,13 +205,15 @@ const BlogListing: React.FC = () => {
</svg> </svg>
</div> </div>
</div> </div>
<div className="relative">
{/* Search Input */}
<div className="relative w-full sm:w-64">
<input <input
type="text" type="text"
value={searchQuery} value={searchQuery}
onChange={handleSearchChange} onChange={handleSearchChange}
placeholder="Search blogs..." 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"> <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"> <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>
</div> </div>
{/* Results Info */} {/* Results Info */}
{(selectedCategory !== 'All Categories' || searchQuery.trim()) && ( {(selectedCategory !== 'All Categories' || searchQuery.trim()) && (
<div className="max-w-7xl mx-auto px-4 pb-4"> <div className="max-w-7xl mx-auto px-4 pb-4">
@ -272,11 +276,11 @@ const BlogListing: React.FC = () => {
{/* Blog Image */} {/* Blog Image */}
<div className="relative h-48 w-full overflow-hidden"> <div className="relative h-48 w-full overflow-hidden">
<img <img
src={blog.image} src={blog.image}
alt={blog.title} alt={blog.title}
className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105" className="w-full h-full object-cover transition-transform duration-300 group-hover:scale-105"
onError={handleImageError} onError={handleImageError}
/> />
</div> </div>
{/* Blog Content */} {/* Blog Content */}