import React, { useState } from 'react'; // Sample article data const articles = [ { id: 1, title: "Getting Started with React Hooks", language: "JavaScript", framework: "React", date: "2024-06-15", content: "React Hooks are a game-changer in the world of React development...", author: { username: "Todd Roger Whisner", avatar: "/api/placeholder/30/30" }, category: "Web Development" }, { id: 2, title: "Python Data Structures Explained", language: "Python", framework: "Django", date: "2024-06-10", content: "Python offers several built-in data structures that are fundamental to writing efficient and clean code...", author: { username: "Todd Roger Whisner", avatar: "/api/placeholder/30/30" }, category: "Backend" }, { id: 3, title: "Rust for Systems Programming", language: "Rust", framework: "Actix", date: "2024-06-05", content: "Rust is a systems programming language that runs blazingly fast...", author: { username: "rustacean", avatar: "/api/placeholder/30/30" }, category: "Systems" }, { id: 4, title: "Introduction to Machine Learning with TensorFlow", language: "Python", framework: "TensorFlow", date: "2024-06-20", content: "Machine Learning is revolutionizing various industries...", author: { username: "Todd Roger Whisner", avatar: "/api/placeholder/30/30" }, category: "AI" }, { id: 5, title: "Building RESTful APIs with Express.js", language: "JavaScript", framework: "Express.js", date: "2024-06-25", content: "Express.js is a minimal and flexible Node.js web application framework...", author: { username: "Todd Roger Whisner", avatar: "/api/placeholder/30/30" }, category: "Backend" }, { id: 6, title: "Vue.js Component Architecture", language: "JavaScript", framework: "Vue.js", date: "2024-06-30", content: "Vue.js offers a component-based architecture that makes building user interfaces a breeze...", author: { username: "Todd Roger Whisner", avatar: "/api/placeholder/30/30" }, category: "Web Development" }, ]; // Sample job data const jobs = [ { id: 1, title: "Senior React Developer", company: "TechCorp", location: "Remote", salary: "$120k - $150k", description: "Looking for an experienced React developer to lead our front-end team..." }, { id: 2, title: "Python Backend Engineer", company: "DataSystems", location: "New York, NY", salary: "$100k - $130k", description: "Seeking a Python expert to work on our data processing pipelines..." }, { id: 3, title: "Full Stack JavaScript Developer", company: "WebSolutions", location: "San Francisco, CA", salary: "$110k - $140k", description: "Join our team to build modern web applications using Node.js and React..." }, ]; const NavBar = ({ onSortChange, onLanguageChange, onFrameworkChange, onCategoryChange, mode, onModeChange }) => ( ); const ArticleCard = ({ article, onReadMore }) => (

{article.title}

By: {article.author.username}

Category: {article.category} | Language: {article.language} | Framework: {article.framework} | Date: {article.date}

{article.content.substring(0, 150)}...

); const JobCard = ({ job }) => (

{job.title}

Company: {job.company}

Location: {job.location} | Salary: {job.salary}

{job.description.substring(0, 150)}...

); const ArticleModal = ({ article, onClose }) => (

{article.title}

By: {article.author.username}

Category: {article.category} | Language: {article.language} | Framework: {article.framework} | Date: {article.date}

{article.content}

); const App = () => { const [mode, setMode] = useState('articles'); const [sortOrder, setSortOrder] = useState('dateDesc'); const [selectedLanguage, setSelectedLanguage] = useState('all'); const [selectedFramework, setSelectedFramework] = useState('all'); const [selectedCategory, setSelectedCategory] = useState('all'); const [selectedArticle, setSelectedArticle] = useState(null); const sortedAndFilteredArticles = articles .filter(article => (selectedLanguage === 'all' || article.language === selectedLanguage) && (selectedFramework === 'all' || article.framework === selectedFramework) && (selectedCategory === 'all' || article.category === selectedCategory) ) .sort((a, b) => { if (sortOrder === 'dateDesc') { return new Date(b.date) - new Date(a.date); } else { return new Date(a.date) - new Date(b.date); } }); const handleReadMore = (article) => { setSelectedArticle(article); }; const handleCloseModal = () => { setSelectedArticle(null); }; return (
{mode === 'articles' ? ( sortedAndFilteredArticles.map(article => ( )) ) : ( jobs.map(job => ( )) )}
{selectedArticle && }
); }; export default App;