46 lines
1.3 KiB
TypeScript
46 lines
1.3 KiB
TypeScript
"use client"
|
|
import { useState } from "react";
|
|
import { SectionHeader } from "../general/SectionHeader";
|
|
import { NewsItem } from "./NewsItem";
|
|
import styles from "./newsList.module.scss";
|
|
import { NewsFragment } from "@/lib/news";
|
|
import { SectionFooter } from "../general/SectionFooter";
|
|
|
|
export const NewsList = ({
|
|
news,
|
|
heading,
|
|
featured
|
|
}: {
|
|
news: NewsFragment[];
|
|
heading?: string;
|
|
featured?: boolean;
|
|
}) => {
|
|
const [limit, setLimit] = useState(featured ? 4 : 17);
|
|
function increaseLimit() {
|
|
setLimit(limit + 16);
|
|
}
|
|
|
|
return (
|
|
<section className={styles.newsWrapper}>
|
|
{heading && (
|
|
<SectionHeader heading={heading} link="/aktuelt" linkText="Se flere artikler" />
|
|
)}
|
|
<ul className={`${styles.newsList} ${featured && styles.featured}`}>
|
|
{news.slice(0, limit).map((singleNews) => (
|
|
<NewsItem key={singleNews.id} news={singleNews} />
|
|
))}
|
|
</ul>
|
|
{!featured && limit && news.length > limit && (
|
|
<div className={styles.showMore}>
|
|
<button onClick={increaseLimit}>
|
|
<span>Last inn flere artikler</span>
|
|
</button>
|
|
</div>
|
|
)}
|
|
{heading && (
|
|
<SectionFooter link="/aktuelt" linkText="Se flere artikler" />
|
|
)}
|
|
</section>
|
|
);
|
|
};
|