diff --git a/src/components/articles/ArticleSuggestion.jsx b/src/components/articles/ArticleSuggestion.jsx new file mode 100644 index 0000000..77fc6da --- /dev/null +++ b/src/components/articles/ArticleSuggestion.jsx @@ -0,0 +1,35 @@ +import Card from "./Card"; + +function ArticleCard() { + 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: "#", + }, +]; + + + return ; +} + +export default ArticleCard; diff --git a/src/components/articles/Card.jsx b/src/components/articles/Card.jsx new file mode 100644 index 0000000..fe857aa --- /dev/null +++ b/src/components/articles/Card.jsx @@ -0,0 +1,165 @@ +import React, { useState, useEffect, useRef } from "react"; +import { Link } from "react-router-dom"; +import { + FaRegClock, + FaRegThumbsUp, + FaRegThumbsDown, + FaShareAlt, + FaBookmark, + FaChevronDown, + FaChevronUp, +} from "react-icons/fa"; +import { motion as Motion, AnimatePresence } from "framer-motion"; + +function Card({ articles }) { + const [expanded, setExpanded] = useState(() => + Array(articles.length).fill(false) + ); + const descRefs = useRef([]); + + useEffect(() => { + setExpanded(Array(articles.length).fill(false)); + }, [articles]); + + const toggleExpand = (idx) => { + setExpanded((prev) => + prev.map((val, i) => (i === idx ? !val : val)) + ); + setTimeout(() => { + if (descRefs.current[idx]) { + descRefs.current[idx].scrollIntoView({ behavior: "smooth", block: "center" }); + } + }, 200); + }; + + return ( +
+

+ Latest Articles +

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

+ {article.title} +

+ + {/* Description section with animation */} + + descRefs.current[idx] = el} + key={showFull ? `expanded-${idx}` : `collapsed-${idx}`} + initial={{ opacity: 0, height: 0 }} + animate={{ opacity: 1, height: "auto" }} + exit={{ opacity: 0, height: 0 }} + transition={{ duration: 0.3 }} + className="text-[#cccccc] mb-2 overflow-hidden" + > + {showFull ? article.description : preview} + + + + {isLong && ( + + )} + + {/* Author and time */} +
+ + By{" "} + + {article.author} + + +
+ {article.readTime} +
+
+ + {/* Footer actions */} +
+ + Go to Article + + +
+ + + + + + + + + + + + + + + +
+
+
+ + ); + })} +
+
+ ); +} + +export default Card; diff --git a/src/pages/LandingPage.jsx b/src/pages/LandingPage.jsx index 94cf32b..04098ed 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 ArticleCard from "../components/articles/ArticleSuggestion"; // modularized the code for readablity as requested in the issue const LandingPage = () => { @@ -12,12 +13,14 @@ const LandingPage = () => { {/* about section */} + {/* articles section */} + {/* hacktoberfest terminal section */} {/* community section */} {/* future footer component will be added here */} -