From 9c4554d4aba9d5b323bff75d70bfa275723de994 Mon Sep 17 00:00:00 2001 From: Heykcer Date: Sat, 4 Oct 2025 11:57:28 +0530 Subject: [PATCH 1/2] Added article section --- src/components/articles/Card.jsx | 125 +++++++++++++++++++++++++++++++ src/pages/LandingPage.jsx | 5 +- 2 files changed, 129 insertions(+), 1 deletion(-) create mode 100644 src/components/articles/Card.jsx diff --git a/src/components/articles/Card.jsx b/src/components/articles/Card.jsx new file mode 100644 index 0000000..db92537 --- /dev/null +++ b/src/components/articles/Card.jsx @@ -0,0 +1,125 @@ +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +import { FaRegClock, FaRegThumbsUp, FaRegThumbsDown, FaShareAlt, FaBookmark, FaChevronDown, FaChevronUp } from "react-icons/fa"; + +const articles = [ + { + img: "https://images.unsplash.com/photo-1461749280684-dccba630e2f6?auto=format&fit=crop&w=600&q=80", + title: "Understanding React Context API", + description: "A deep dive into the React Context API and how to use it effectively in your applications. The Context API is a powerful feature in React that allows you to share state across the entire app lightly and with ease. In this article, we will explore its use cases, implementation, and best practices for scalable applications.", + author: "Alex Johnson", + readTime: "5 min read", + link: "#", + }, + { + img: "https://images.unsplash.com/photo-1519389950473-47ba0277781c?auto=format&fit=crop&w=600&q=80", + title: "Top 10 JavaScript ES6 Features", + description: "Explore the most important ES6 features every JavaScript developer should know. From arrow functions to destructuring, ES6 brought a lot of improvements to the language. This article covers the top features and how they can improve your code.", + author: "Priya Singh", + readTime: "7 min read", + link: "#", + }, + { + img: "https://images.unsplash.com/photo-1506744038136-46273834b3fb?auto=format&fit=crop&w=600&q=80", + title: "Mastering CSS Grid Layout", + description: "Learn how to build complex and responsive layouts easily using CSS Grid. CSS Grid is a two-dimensional layout system that enables developers to create web layouts quickly and efficiently. This guide will help you master the basics and advanced techniques.", + author: "Samuel Lee", + readTime: "6 min read", + link: "#", + }, +]; + +function Card() { + // Track which articles are expanded + const [expanded, setExpanded] = useState(Array(articles.length).fill(false)); + + const toggleExpand = (idx) => { + setExpanded((prev) => + prev.map((val, i) => (i === idx ? !val : val)) + ); + }; + + return ( +
+

+ Latest Articles +

+
+ {articles.map((article, idx) => { + const isLong = article.description.length > 120; + const showFull = expanded[idx]; + const desc = isLong && !showFull + ? article.description.slice(0, 120) + "..." + : article.description; + return ( +
+ {article.title} +
+

+ {article.title} +

+

+ {desc} + {isLong && ( + + )} +

+
+ + By {article.author} + + {article.readTime} +
+
+ + Go to Article + +
+ + + + +
+
+
+
+ ); + })} +
+
+ ); +} + +export default Card; diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx index 94cf32b..ec24a23 100644 --- a/src/pages/LandingPage.jsx +++ b/src/pages/LandingPage.jsx @@ -3,6 +3,7 @@ import About from "../components/ui/About"; import Terminal from "../components/ui/Terminal"; import Community from "../components/ui/Community"; import Footer from "../components/Footer"; +import Card from "../components/articles/Card"; // modularized the code for readablity as requested in the issue const LandingPage = () => { @@ -12,12 +13,14 @@ const LandingPage = () => { {/* about section */} + {/* articles section will be added here in future */} + {/* hacktoberfest terminal section */} {/* community section */} {/* future footer component will be added here */} -