add news

web/src/components/events/EventItem.tsx

@@ -8,7 +8,7 @@ import {
   EventFragment,
   getClosestOccurrence,
 } from "@/lib/event";
-import { toLocalTime, formatDate, commonDateFormat } from "@/lib/date";
+import { toLocalTime, formatDate, commonDateTimeFormat } from "@/lib/date";
 
 export const EventItem = ({
   event,
@@ -46,11 +46,11 @@ export const EventItem = ({
           <p className={styles.details}>
             {numOccurrences === 1 &&
               nextOccurrence?.start &&
-              formatDate(nextOccurrence.start, commonDateFormat)}
+              formatDate(nextOccurrence.start, commonDateTimeFormat)}
             {numOccurrences > 1 && nextOccurrence?.start && (
               <span>
                 <em>Neste:</em>{" "}
-                {formatDate(nextOccurrence.start, commonDateFormat)}
+                {formatDate(nextOccurrence.start, commonDateTimeFormat)}
               </span>
             )}
           </p>

web/src/components/general/PageHeader.tsx

@@ -10,7 +10,7 @@ export const PageHeader = ({
   return (
     <div className={styles.pageHeader}>
       <h1 className={styles.title}>{heading}</h1>
-      <p className="lead">{lead}</p>
+      {lead && <p className="lead">{lead}</p>}
     </div>
   );
 };

web/src/components/news/NewsItem.tsx

@@ -1,23 +1,34 @@
 import styles from "./newsItem.module.scss";
-import Link from "next/link";
 import Image from "../general/Image";
+import { NewsFragment } from "@/lib/news";
+import { formatDate, commonDateFormat } from "@/lib/date";
+import Link from "next/link";
+
+export const NewsItem = ({ news }: { news: NewsFragment }) => {
+  const featuredImage: any = news.featuredImage;
 
-export const NewsItem = () => {
   return (
-    <li className={`${styles.newsItem} linkItem`}>
-      <div className={styles.image}></div>
-      <div className={styles.text}>
-        <p className={styles.date}>Publiseringsdato</p>
-        <h2 className={styles.title}>Nyhetsartikkel</h2>
-        <p className={styles.lead}>
-          Sed sodales nunc quis sapien malesuada, a faucibus turpis blandit.
-          Suspendisse potenti. Sed auctor enim et augue dapibus, vitae laoreet
-          lacus vulputate. Nulla sed finibus diam.
-        </p>
-      </div>
-      {/*<Link href={`/lokaler/${venue.slug}`} className="hiddenLink">
-        Mer om lokalet {venue.title}
-  </Link>*/}
-    </li>
+    <Link href={`/aktuelt/${news.slug}`}>
+      <li className={`${styles.newsItem} linkItem`}>
+        <div className={styles.image}>
+          {featuredImage && (
+            <Image
+              src={featuredImage.url}
+              alt={featuredImage.alt}
+              width={featuredImage.width}
+              height={featuredImage.height}
+              sizes="20vw"
+            />
+          )}
+        </div>
+        <div className={styles.text}>
+          <p className={styles.date}>
+            {formatDate(news.firstPublishedAt, commonDateFormat)}
+          </p>
+          <h2 className={styles.title}>{news.title}</h2>
+          <p className={styles.lead}>{news.excerpt}</p>
+        </div>
+      </li>
+    </Link>
   );
 };

web/src/components/news/NewsList.tsx

@@ -1,38 +1,27 @@
 import { NewsItem } from "./NewsItem";
 import styles from "./newsList.module.scss";
+import { NewsFragment } from "@/lib/news";
 
 export const NewsList = ({
+  news,
   heading,
   featured,
   limit,
 }: {
+  news: NewsFragment[];
   heading?: string;
   featured?: boolean;
   limit?: number;
 }) => {
+  const filteredNews = limit ? news.slice(0, limit) : news;
+
   return (
     <section className={styles.newsWrapper}>
       {heading && <h2 className="suphead">{heading}</h2>}
       <ul className={`${styles.newsList} ${featured && styles.featured}`}>
-        {limit === 3 ? (
-          <>
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-          </>
-        ) : (
-          <>
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-            <NewsItem />
-          </>
-        )}
+        {filteredNews.map((singleNews) => (
+          <NewsItem key={singleNews.id} news={singleNews} />
+        ))}
       </ul>
     </section>
   );