simple show more news working

sid0sid · Jun 21, 2024 · ca6e4b2 · ca6e4b2
1 parent 267d6cc
commit ca6e4b2
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 1 deletion.
diff --git a/src/components/HeroSection/HeroElements.jsx b/src/components/HeroSection/HeroElements.jsx
@@ -274,3 +274,21 @@ export const HeroFollowBlock = styled.div`
         font-size: 14px;
     }
 `;
+
+export const HeroNewsMoreButton = styled.button`
+    background: #fff;
+    color: #000;
+    font-size: 16px;
+    padding: 10px 24px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    align-self: center;
+
+    &:hover {
+        background: #000;
+        color: #fff;
+    }
+`;
diff --git a/src/components/HeroSection/index.jsx b/src/components/HeroSection/index.jsx
@@ -13,12 +13,14 @@ import {
     HeroNewsItem,
     HeroNewsItemContent,
     HeroNewsItemDate,
+    HeroNewsMoreButton,
     HeroNewsTitle,
     HeroRow,
     Img,
     UDLLink,
 } from "@/components/HeroSection/HeroElements";
 import img from "@/images/book_cover.jpg";
+import { useState } from "react";
 
 const citation = `
     @book{prince2023understanding,
@@ -140,19 +142,28 @@ const news = [
 ];
 
 export default function HeroSection() {
+    const [showMoreNews, setShowMoreNews] = useState(false);
+
+    const toggleShowMore = () => {
+        setShowMoreNews((p) => !p);
+    };
+
     return (
         <HeroContainer id="home">
             <HeroContent>
                 <HeroRow>
                     <HeroColumn1>
                         <HeroNewsBlock>
                             <HeroNewsTitle>RECENT NEWS:</HeroNewsTitle>
-                            {news.map((item, index) => (
+                            {(showMoreNews ? news : news.slice(0, 7)).map((item, index) => (
                                 <HeroNewsItem key={index}>
                                     <HeroNewsItemDate>{item.date}</HeroNewsItemDate>
                                     {item.content}
                                 </HeroNewsItem>
                             ))}
+                            <HeroNewsMoreButton onClick={toggleShowMore}>
+                                {showMoreNews ? "Show less" : "Show more"}
+                            </HeroNewsMoreButton>
                         </HeroNewsBlock>
                         <HeroCitationTitle>CITATION:</HeroCitationTitle>
                         <HeroCitationBlock>