From 02638c2374f2cb40e67d6086ffe2659be52e10fe Mon Sep 17 00:00:00 2001
From: luctra02 <64017398+luctra02@users.noreply.github.com>
Date: Mon, 8 Apr 2024 16:56:13 +0200
Subject: [PATCH] =?UTF-8?q?style(frontend):=20:lipstick:=20Wrap=20div=20ar?=
 =?UTF-8?q?ound=20blocksrenderer=20component=20=E2=80=A6=20(#241)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* style(frontend): :lipstick: Wrap div around blocksrenderer component and add typography tailwind styling for all blocksrendered content

* refactor(frontend): :recycle: Run prettier
---
 .../src/app/projects/[projectSlug]/page.tsx   |   2 +-
 .../src/components/BlockRendererClient.tsx    | 142 +++++++++---------
 2 files changed, 73 insertions(+), 71 deletions(-)

diff --git a/frontend/src/app/projects/[projectSlug]/page.tsx b/frontend/src/app/projects/[projectSlug]/page.tsx
index 0870ef1..e009fd3 100644
--- a/frontend/src/app/projects/[projectSlug]/page.tsx
+++ b/frontend/src/app/projects/[projectSlug]/page.tsx
@@ -75,7 +75,7 @@ export default async function Page({
     }
     return (
         <div className="flex flex-col items-center gap-4">
-            <div className="prose prose-invert w-1/2 lg:prose-xl">
+            <div className="w-1/2">
                 <BlockRendererClient content={content} />
             </div>
             {graphqlData.data.projects?.data[0].attributes?.satellites?.data
diff --git a/frontend/src/components/BlockRendererClient.tsx b/frontend/src/components/BlockRendererClient.tsx
index c455f11..7817767 100644
--- a/frontend/src/components/BlockRendererClient.tsx
+++ b/frontend/src/components/BlockRendererClient.tsx
@@ -13,78 +13,80 @@ export default function BlockRendererClient({
 }) {
     if (!content) return null;
     return (
-        <BlocksRenderer
-            content={content}
-            blocks={{
-                image: ({ image }) => {
-                    return (
-                        <NextImage
-                            src={image.url}
-                            width={image.width}
-                            className="object-contain"
-                            height={image.height}
-                            alt={image.alternativeText || ""}
-                        />
-                    );
-                },
-                heading: ({ children, level }) => {
-                    switch (level) {
-                        case 1:
-                            return <h1>{children}</h1>;
-                        case 2:
-                            return <h2>{children}</h2>;
-                        case 3:
-                            return <h3>{children}</h3>;
-                        case 4:
-                            return <h4>{children}</h4>;
-                        case 5:
-                            return <h5>{children}</h5>;
-                        default:
-                            return <h1>{children}</h1>;
-                    }
-                },
+        <div className="prose prose-invert lg:prose-xl">
+            <BlocksRenderer
+                content={content}
+                blocks={{
+                    image: ({ image }) => {
+                        return (
+                            <NextImage
+                                src={image.url}
+                                width={image.width}
+                                className="object-contain"
+                                height={image.height}
+                                alt={image.alternativeText || ""}
+                            />
+                        );
+                    },
+                    heading: ({ children, level }) => {
+                        switch (level) {
+                            case 1:
+                                return <h1>{children}</h1>;
+                            case 2:
+                                return <h2>{children}</h2>;
+                            case 3:
+                                return <h3>{children}</h3>;
+                            case 4:
+                                return <h4>{children}</h4>;
+                            case 5:
+                                return <h5>{children}</h5>;
+                            default:
+                                return <h1>{children}</h1>;
+                        }
+                    },
 
-                paragraph: ({ children }) => {
-                    const child = children as {
-                        props: {
-                            type: "text";
-                            text: string;
-                            italic: boolean;
-                        };
-                    }[];
+                    paragraph: ({ children }) => {
+                        const child = children as {
+                            props: {
+                                type: "text";
+                                text: string;
+                                italic: boolean;
+                            };
+                        }[];
 
-                    const italic = child[0]?.props.italic;
-                    if (italic) {
-                        return <p className="text-sm">{children}</p>;
-                    }
-                    return <p>{children}</p>;
-                },
+                        const italic = child[0]?.props.italic;
+                        if (italic) {
+                            return <p>{children}</p>;
+                        }
+                        return <p>{children}</p>;
+                    },
 
-                link: ({ url, children }) => {
-                    // Check if the URL is a valid YouTube video link
-                    const isYouTubeVideo = url.includes("youtube.com");
-                    // Render the iframe only if it's a YouTube video link
-                    if (isYouTubeVideo) {
-                        return (
-                            <div className="flex w-full items-center">
-                                <iframe
-                                    width={"100%"}
-                                    className="aspect-video"
-                                    src={url}
-                                    title="YouTube video"
-                                ></iframe>
-                            </div>
-                        );
-                    } else {
-                        // If it's not a video link, return an anchor with the href
-                        return (
-                            <a href={url} target="_blank">
-                                {children}
-                            </a>
-                        );
-                    }
-                },
-            }}
-        />
+                    link: ({ url, children }) => {
+                        // Check if the URL is a valid YouTube video link
+                        const isYouTubeVideo = url.includes("youtube.com");
+                        // Render the iframe only if it's a YouTube video link
+                        if (isYouTubeVideo) {
+                            return (
+                                <div className="flex w-full items-center">
+                                    <iframe
+                                        width={"100%"}
+                                        className="aspect-video"
+                                        src={url}
+                                        title="YouTube video"
+                                    ></iframe>
+                                </div>
+                            );
+                        } else {
+                            // If it's not a video link, return an anchor with the href
+                            return (
+                                <a href={url} target="_blank">
+                                    {children}
+                                </a>
+                            );
+                        }
+                    },
+                }}
+            />
+        </div>
     );
 }