add news

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>
   );
 };