add featured block

web/src/components/blocks/Blocks.tsx

@@ -2,6 +2,7 @@ import { RichTextBlock } from "./RichTextBlock";
 import { ImageWithTextBlock } from "./ImageWithTextBlock";
 import { ImageSliderBlock } from "./ImageSliderBlock";
 import { HorizontalRuleBlock } from "./HorizontalRuleBlock";
+import { FeaturedBlock } from "./FeaturedBlock";
 
 export const Blocks = ({ blocks }: any) => {
   return blocks.map((block: any) => {
@@ -18,37 +19,12 @@ export const Blocks = ({ blocks }: any) => {
       case "HorizontalRuleBlock":
         return <HorizontalRuleBlock block={block} />;
         break;
+      case "FeaturedBlock":
+        return <FeaturedBlock block={block} />;
+        break;
       default:
         return <div>Unsupported block type {block.blockType}</div>;
         console.log("unsupported block", block);
     }
   });
-};
-
-/*
-StreamFieldBlock
-CharBlock
-TextBlock
-EmailBlock
-IntegerBlock
-FloatBlock
-DecimalBlock
-RegexBlock
-URLBlock
-BooleanBlock
-DateBlock
-TimeBlock
-DateTimeBlock
-RichTextBlock
-RawHTMLBlock
-BlockQuoteBlock
-ChoiceBlock
-StreamBlock
-StructBlock
-StaticBlock
-ListBlock
-EmbedBlock
-PageChooserBlock
-DocumentChooserBlock
-ImageChooserBlock
-*/
+};

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

web/src/components/blocks/featuredBlock.module.scss

@@ -54,6 +54,20 @@
 }
 
 .image {
+  width: 100%;
+  padding-top: 60%;
+  position: relative;
+
+  img {
+    position: absolute;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}
+
+.placeholderImage {
   width: 100%;
   padding-top: 60%;
   background: var(--color-placeholder);