Add dialog for mainImage. Re-use code from other image dialog.

src/components/ImageDialog/ImageDialogSingle.tsx

@@ -0,0 +1,40 @@
+import { RecipeQueryResult } from "../../../sanity.types";
+import { ImageDialogContent } from "./ImageDialogContent";
+import { Image } from "../Image/Image";
+import { urlForImage } from "@/sanity/lib/utils";
+
+export type ImageType = NonNullable<
+  NonNullable<RecipeQueryResult>["mainImage"]
+>;
+
+const width = 1200;
+const height = 800;
+
+type ImageDialogSingleProps = {
+  title: string;
+  description: string;
+  image: ImageType;
+};
+
+export const ImageDialogSingle = (props: ImageDialogSingleProps) => {
+  const { title, description, image } = props;
+
+  const url =
+    urlForImage(image)?.width(width).height(height).fit("max").dpr(2).url() ??
+    "";
+
+  return (
+    <ImageDialogContent title={title} description={description}>
+      <Image
+        className="pointer-events-none aspect-[3/2] h-full max-h-[90vh] w-full rounded-lg object-cover"
+        src={url}
+        width={width}
+        height={height}
+        alt={image.alt ?? "Recipe"}
+        priority={true}
+        blurDataURL={image?.asset?.metadata?.lqip ?? undefined}
+        sizes="(max-width: 768px) 100vw, 70vw"
+      />
+    </ImageDialogContent>
+  );
+};

src/components/PortableText/ImageBox.tsx

@@ -7,8 +7,10 @@ import { Dialog, DialogTrigger } from "../ui/dialog";
 import { Image } from "../Image/Image";
 import dynamic from "next/dynamic";
 
-const ImageDialogContent = dynamic(() =>
-  import("./ImageDialogContent").then((mod) => mod.ImageDialogContent),
+const ImageDialogSingle = dynamic(() =>
+  import("../ImageDialog/ImageDialogSingle").then(
+    (mod) => mod.ImageDialogSingle,
+  ),
 );
 
 export type BlockContentImage = Extract<
@@ -71,19 +73,11 @@ export default function ImageBox({
           )}
         </AspectRatio>
       </DialogTrigger>
-      <ImageDialogContent
+      <ImageDialogSingle
+        image={image}
         title="Bilde"
         description={image.alt ?? "Bilde av matrett"}
-      >
-        <Image
-          className="pointer-events-none aspect-[3/2] h-full max-h-[90vh] w-full rounded-lg object-cover"
-          alt={image.alt ?? "image"}
-          width={width}
-          height={height}
-          sizes="(max-width: 768px) 100vw, 70vw"
-          src={imageUrl}
-        />
-      </ImageDialogContent>
+      />
     </Dialog>
   );
 }

src/components/PortableText/ImageGallery/ImageGalleryContent.tsx

@@ -8,10 +8,10 @@ import {
 import { BlockContentImageGallery } from "./ImageGallery";
 import { Image } from "../../Image/Image";
 import { urlForImage } from "@/sanity/lib/utils";
-import { ImageDialogContent } from "../ImageDialogContent";
+import { ImageDialogContent } from "../../ImageDialog/ImageDialogContent";
 
-const imageWidth = 1024;
-const imageHeight = 682;
+const imageWidth = 1200;
+const imageHeight = 800;
 
 export const ImageGalleryContent = ({
   images,

src/components/Recipe/Header/MainImage.tsx

@@ -0,0 +1,59 @@
+import { urlForImage } from "@/sanity/lib/utils";
+import { title } from "process";
+import { Image } from "../../Image/Image";
+import { Dialog, DialogTrigger } from "@/components/ui/dialog";
+import { ComponentProps } from "react";
+import { RecipeHeader } from "./RecipeHeader";
+import dynamic from "next/dynamic";
+
+const ImageDialogSingle = dynamic(() =>
+  import("@/components/ImageDialog/ImageDialogSingle").then(
+    (mod) => mod.ImageDialogSingle,
+  ),
+);
+
+export type MainImageProps = {
+  mainImage: ComponentProps<typeof RecipeHeader>["mainImage"];
+};
+
+const mainImageWidth = 1024;
+const mainImageHeight = 400;
+
+export const MainImage = ({ mainImage }: MainImageProps) => {
+  if (!mainImage) {
+    return (
+      <div className="flex aspect-[16/3] w-full items-center justify-center rounded-lg bg-secondary text-2xl sm:text-7xl">
+        🍞🍰🧑‍🍳
+      </div>
+    );
+  }
+
+  return (
+    <Dialog>
+      <DialogTrigger>
+        <Image
+          className="w-full cursor-zoom-in rounded-lg"
+          src={
+            urlForImage(mainImage)
+              ?.width(mainImageWidth)
+              .height(mainImageHeight)
+              .fit("max")
+              .dpr(2)
+              .url() ?? ""
+          }
+          width={mainImageWidth}
+          height={mainImageHeight}
+          alt={mainImage.alt ?? title ?? "Recipe"}
+          priority={true}
+          blurDataURL={mainImage?.asset?.metadata?.lqip ?? undefined}
+          sizes="(max-width: 768px) 100vw, 70vw"
+        />
+      </DialogTrigger>
+      <ImageDialogSingle
+        image={mainImage}
+        title="Main image"
+        description={mainImage.alt ?? ""}
+      />
+    </Dialog>
+  );
+};

src/components/Recipe/Header/RecipeHeader.tsx

@@ -0,0 +1,21 @@
+import { RecipeQueryResult } from "../../../../sanity.types";
+import { TypographyH1 } from "../../Typography/TypographyH1";
+import { MainImage } from "./MainImage";
+
+type RQR = NonNullable<RecipeQueryResult>;
+
+export type RecipeHeaderProps = {
+  title: RQR["title"];
+  mainImage: RQR["mainImage"];
+};
+
+export const RecipeHeader = ({ title, mainImage }: RecipeHeaderProps) => {
+  return (
+    <>
+      {title ? (
+        <TypographyH1 className="text-center sm:mb-8">{title}</TypographyH1>
+      ) : null}
+      <MainImage mainImage={mainImage} />
+    </>
+  );
+};

src/components/Recipe/RecipeContent.tsx

@@ -27,7 +27,7 @@ import {
   scalableRecipeNumberTypeName,
 } from "@/sanity/schemaTypes/recipe/constants";
 import dynamic from "next/dynamic";
-import { RecipeHeader } from "./RecipeHeader";
+import { RecipeHeader } from "./Header/RecipeHeader";
 import { InfoItems } from "./InfoItems";
 
 const RecipeEditor = dynamic(() =>