diff --git a/src/components/Articles.tsx b/src/components/Articles.tsx index 4faf471..4dfb528 100644 --- a/src/components/Articles.tsx +++ b/src/components/Articles.tsx @@ -24,136 +24,7 @@ import { ChevronRight, X } from 'lucide-react'; - -// Mock articles data -const articles = [ - { - id: '1', - slug: 'future-of-leadership-development', - title: 'The Future of Leadership Development: Trends and Innovations', - excerpt: 'Explore emerging trends in leadership development and how organizations are adapting to create more effective leaders for tomorrow\'s challenges.', - content: 'Leadership development is evolving rapidly in response to changing workplace dynamics, technological advances, and new generations entering the workforce...', - author: 'Sarah Johnson', - authorTitle: 'Senior Leadership Consultant', - authorAvatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b47c?w=150&h=150&fit=crop&crop=face', - date: '2024-02-20', - readTime: '8 min read', - category: 'Leadership Development', - tags: ['Future of Work', 'Leadership Trends', 'Innovation', 'Strategy'], - thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop', - featured: true, - views: '2.4k', - likes: 45 - }, - { - id: '2', - slug: 'emotional-intelligence-in-leadership', - title: 'Emotional Intelligence: The Key to Effective Leadership', - excerpt: 'Discover how emotional intelligence impacts leadership effectiveness and learn practical strategies to develop your EQ.', - content: 'Emotional intelligence has become increasingly recognized as a critical factor in leadership success...', - author: 'Dr. Michael Chen', - authorTitle: 'Executive Coach', - authorAvatar: 'https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=150&h=150&fit=crop&crop=face', - date: '2024-02-18', - readTime: '6 min read', - category: 'Personal Development', - tags: ['Emotional Intelligence', 'Leadership Skills', 'Communication', 'Self-Awareness'], - thumbnail: 'https://images.unsplash.com/photo-1559027615-cd4628902d4a?w=600&h=400&fit=crop', - featured: true, - views: '1.8k', - likes: 32 - }, - { - id: '3', - slug: 'building-high-performing-teams', - title: 'Building High-Performing Teams: A Leader\'s Guide', - excerpt: 'Learn the essential strategies for creating and maintaining high-performing teams that deliver exceptional results.', - content: 'High-performing teams don\'t happen by accident. They require intentional leadership, clear purpose, and the right environment...', - author: 'Lisa Rodriguez', - authorTitle: 'Team Development Specialist', - authorAvatar: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=150&h=150&fit=crop&crop=face', - date: '2024-02-15', - readTime: '10 min read', - category: 'Team Development', - tags: ['Team Building', 'Performance', 'Collaboration', 'Leadership'], - thumbnail: 'https://images.unsplash.com/photo-1522071820081-009f0129c71c?w=600&h=400&fit=crop', - featured: false, - views: '3.1k', - likes: 58 - }, - { - id: '4', - slug: 'digital-transformation-leadership', - title: 'Leading Digital Transformation: A Strategic Approach', - excerpt: 'Navigate the complexities of digital transformation with proven leadership strategies and best practices.', - content: 'Digital transformation is reshaping industries and organizations worldwide. Successful transformation requires strong leadership...', - author: 'David Park', - authorTitle: 'Digital Strategy Consultant', - authorAvatar: 'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=150&h=150&fit=crop&crop=face', - date: '2024-02-12', - readTime: '12 min read', - category: 'Digital Transformation', - tags: ['Digital Strategy', 'Change Management', 'Technology', 'Innovation'], - thumbnail: 'https://images.unsplash.com/photo-1560472355-536de3962603?w=600&h=400&fit=crop', - featured: false, - views: '2.7k', - likes: 41 - }, - { - id: '5', - slug: 'crisis-leadership-strategies', - title: 'Crisis Leadership: Navigating Uncertainty with Confidence', - excerpt: 'Master the art of crisis leadership and learn how to guide your organization through challenging times.', - content: 'Crisis situations test the mettle of leaders and reveal the true strength of an organization...', - author: 'Jennifer Adams', - authorTitle: 'Crisis Management Expert', - authorAvatar: 'https://images.unsplash.com/photo-1580489944761-15a19d654956?w=150&h=150&fit=crop&crop=face', - date: '2024-02-10', - readTime: '9 min read', - category: 'Crisis Management', - tags: ['Crisis Leadership', 'Risk Management', 'Decision Making', 'Communication'], - thumbnail: 'https://images.unsplash.com/photo-1584697964358-3e14ca57658b?w=600&h=400&fit=crop', - featured: false, - views: '1.9k', - likes: 35 - }, - { - id: '6', - slug: 'sustainable-leadership-practices', - title: 'Sustainable Leadership: Building for the Long Term', - excerpt: 'Explore sustainable leadership practices that create lasting value for organizations and stakeholders.', - content: 'Sustainable leadership goes beyond short-term gains to create lasting value for all stakeholders...', - author: 'Robert Kim', - authorTitle: 'Sustainability Consultant', - authorAvatar: 'https://images.unsplash.com/photo-1560250097-0b93528c311a?w=150&h=150&fit=crop&crop=face', - date: '2024-02-08', - readTime: '7 min read', - category: 'Strategy', - tags: ['Sustainability', 'ESG', 'Long-term Thinking', 'Stakeholder Value'], - thumbnail: 'https://images.unsplash.com/photo-1542601906990-b4d3fb778b09?w=600&h=400&fit=crop', - featured: false, - views: '1.5k', - likes: 28 - }, - { - id: '7', - slug: 'strategic-thinking-frameworks', - title: 'Strategic Thinking Frameworks for Modern Leaders', - excerpt: 'Master strategic thinking with proven frameworks that help leaders anticipate challenges and seize opportunities.', - content: 'Strategic thinking is a critical skill for leaders navigating complex business environments...', - author: 'Dr. Amanda Foster', - authorTitle: 'Strategic Leadership Coach', - authorAvatar: 'https://images.unsplash.com/photo-1544725176-7c40e5a71c5e?w=150&h=150&fit=crop&crop=face', - date: '2024-02-05', - readTime: '11 min read', - category: 'Strategy', - tags: ['Strategic Thinking', 'Frameworks', 'Decision Making', 'Planning'], - thumbnail: 'https://images.unsplash.com/photo-1552664730-d307ca884978?w=600&h=400&fit=crop', - featured: false, - views: '2.1k', - likes: 39 - }, -]; +import { articlesData } from '../data/articlesData'; export function Articles() { const [searchTerm, setSearchTerm] = useState(''); @@ -167,14 +38,16 @@ export function Articles() { const [currentPage, setCurrentPage] = useState(1); const articlesPerPage = 4; const containerRef = useRef(null); - - // Get unique values for filters - const categories = ['All Categories', ...Array.from(new Set(articles.map(article => article.category)))]; - const authors = ['All Authors', ...Array.from(new Set(articles.map(article => article.author)))]; + // Use articlesData instead of the old articles variable + const articles = articlesData; + + // Get unique values for filters - FIXED: using articlesData + const categories = ['All Categories', ...Array.from(new Set(articlesData.map(article => article.category)))]; + const authors = ['All Authors', ...Array.from(new Set(articlesData.map(article => article.author)))]; const readTimes = ['All Read Times', 'Under 5 min', '5-10 min', 'Over 10 min']; const dateRanges = ['All Time', 'Last 7 days', 'Last 30 days', 'Last 3 months']; - const allTags = Array.from(new Set(articles.flatMap(article => article.tags))); + const allTags = Array.from(new Set(articlesData.flatMap(article => article.tags))); const sortOptions = [ { value: 'Most Recent', label: 'Most Recent' }, { value: 'oldest', label: 'Oldest First' }, @@ -183,8 +56,8 @@ export function Articles() { { value: 'popular', label: 'Most Popular' } ]; - // Filter and sort articles - const filteredArticles = articles.filter(article => { + // Filter and sort articles - FIXED: using articlesData + const filteredArticles = articlesData.filter(article => { const matchesSearch = article.title.toLowerCase().includes(searchTerm.toLowerCase()) || article.excerpt.toLowerCase().includes(searchTerm.toLowerCase()) || article.author.toLowerCase().includes(searchTerm.toLowerCase()) || @@ -253,8 +126,6 @@ export function Articles() { setSortBy('Most Recent'); }; - - const hasActiveFilters = searchTerm || selectedCategory !== 'All Categories' || selectedAuthor !== 'All Authors' || @@ -298,10 +169,12 @@ export function Articles() {
-
{articles.length}+
+ {/* FIXED: Using articlesData.length */} +
{articlesData.length}+
Expert Articles
+ {/* FIXED: Using categories from articlesData */}
{categories.length - 1}
Categories
@@ -342,8 +215,8 @@ export function Articles() {