add featured block

web/src/components/blocks/FeaturedBlock.tsx

@@ -1,18 +1,36 @@
+import { FeaturedBlock as FeaturedBlockType } from "@/gql/graphql";
+import Link from "next/link";
+import Image from "../general/Image";
 import styles from "./featuredBlock.module.scss";
 
-export const FeaturedBlock = ({ block }: any) => {
+export const FeaturedBlock = ({ block }: { block: FeaturedBlockType }) => {
+  const image = !!block.featuredImageOverride
+    ? block.featuredImageOverride
+    : null;
+  // TODO: fetch image from target page
+
   return (
     <div className={styles.featuredBlock}>
       <div className={styles.text}>
-        <h2>En fremhevet artikkel eller side</h2>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut molestie
-          tortor a interdum blandit. Sed ac purus sit amet libero posuere
-          molestie.
-        </p>
-        <a href="#">Mer om denne saken &rarr;</a>
+        <h2>{block.title}</h2>
+        <div dangerouslySetInnerHTML={{ __html: block.featuredBlockText }} />
+        <Link href={block.featuredPage.url ?? "#"}>
+          {block.linkText} &rarr;
+        </Link>
       </div>
-      <div className={styles.image}></div>
+      {image && (
+        <div className={styles.image}>
+          {" "}
+          <Image
+            src={image.url}
+            alt={image.alt ?? ""}
+            width={image.width}
+            height={image.height}
+            sizes="20vw"
+          />
+        </div>
+      )}
+      {!image && <div className={styles.placeholderImage} />}
     </div>
   );
 };