limit news articles shown and add button to show more

web/src/components/news/NewsList.tsx

@@ -1,3 +1,5 @@
+"use client"
+import { useState } from "react";
 import { SectionHeader } from "../general/SectionHeader";
 import { NewsItem } from "./NewsItem";
 import styles from "./newsList.module.scss";
@@ -6,15 +8,16 @@ import { NewsFragment } from "@/lib/news";
 export const NewsList = ({
   news,
   heading,
-  featured,
+  featured
-  limit,
 }: {
   news: NewsFragment[];
   heading?: string;
   featured?: boolean;
-  limit?: number;
 }) => {
-  const filteredNews = limit ? news.slice(0, limit) : news;
+  const [limit, setLimit] = useState(17);
+  function increaseLimit() {
+    setLimit(limit + 16);
+  }
 
   return (
     <section className={styles.newsWrapper}>
@@ -22,10 +25,17 @@ export const NewsList = ({
         <SectionHeader heading={heading} link="/aktuelt" linkText="Se flere artikler" />
       )}
       <ul className={`${styles.newsList} ${featured && styles.featured}`}>
-        {filteredNews.map((singleNews) => (
+        {news.slice(0, limit).map((singleNews) => (
           <NewsItem key={singleNews.id} news={singleNews} />
         ))}
       </ul>
+      {limit && news.length > limit && (
+        <div className={styles.showMore}>
+          <button onClick={increaseLimit}>
+            <span>Last inn flere artikler</span>
+          </button>
+        </div>
+      )}
     </section>
   );
 };

web/src/components/news/newsList.module.scss

@@ -54,6 +54,11 @@
   }
 }
 
+.showMore {
+  margin-top: var(--spacing-s);
+  text-align: center;
+}
+
 @media (max-width: 900px) {
   .newsList, .newsList.featured {
     li {