add(blockRenderer): add blockRenderer component to add link open to a new page

next/components/articleBlock/index.jsx

@@ -1,20 +1,21 @@
-import { BlocksRenderer } from "@strapi/blocks-react-renderer";
-import Button from "../button";
-import styles from "./style.module.scss";
+import BlockRenderer from '@/components/blockRenderer';
+import Button from '../button';
+import styles from './style.module.scss';
 
-export default function ArticleBlock({title, content, link, className, ...props}) {
-    return (
-        <article {...props} className={`${styles.articleBlock} ${className ?? ''}`}>
-            <h4>{title}</h4>
-            {content ? <BlocksRenderer content={content}/> : null}
-            <Button 
-                type="secondary"
-                as="a" 
-                href={link}
-                target="_blank"
-            >
-                Lire la suite
-            </Button>
-        </article>
-    );
+export default function ArticleBlock({
+  title,
+  content,
+  link,
+  className,
+  ...props
+}) {
+  return (
+    <article {...props} className={`${styles.articleBlock} ${className ?? ''}`}>
+      <h4>{title}</h4>
+      {content ? <BlockRenderer content={content} /> : null}
+      <Button type="secondary" as="a" href={link} target="_blank">
+        Lire la suite
+      </Button>
+    </article>
+  );
 }

next/components/blockRenderer/index.jsx

@@ -0,0 +1,18 @@
+'use client';
+import { BlocksRenderer } from '@strapi/blocks-react-renderer';
+import Link from 'next/link';
+
+export default function BlockRenderer({ content }) {
+  return (
+    <BlocksRenderer
+      content={content}
+      blocks={{
+        link: ({ children, url }) => (
+          <Link href={url} target="_blank">
+            {children}
+          </Link>
+        ),
+      }}
+    />
+  );
+}

next/components/timeSlot/index.jsx

@@ -1,23 +1,24 @@
-import { BlocksRenderer } from '@strapi/blocks-react-renderer';
+import BlockRenderer from '@/components/blockRenderer';
 import styles from './style.module.scss';
 
 export default async function TimeSlot(props) {
-    const date_begin = new Date(props.start)
-    const date_end = new Date(props.end)
-    const date_format = new Intl.DateTimeFormat('fr', {
-          weekday: 'long',
-          month: "long",
-          day: "numeric"
-        }).format(date_begin)
+  const date_begin = new Date(props.start);
+  const date_end = new Date(props.end);
+  const date_format = new Intl.DateTimeFormat('fr', {
+    weekday: 'long',
+    month: 'long',
+    day: 'numeric',
+  }).format(date_begin);
 
-    return (
-        <article className={styles.timeSlot}>
-            <h4>
-                {date_format} - {date_begin.getHours()}h
-                {date_begin.getMinutes() !== 0 ? date_begin.getMinutes() : ""} à&nbsp;
-                {date_end.getHours()}h{date_end.getMinutes() !== 0 ? date_end.getMinutes() : ""}
-            </h4>
-            <BlocksRenderer content={props.content}/>
-        </article>
-    );
-}
+  return (
+    <article className={styles.timeSlot}>
+      <h4>
+        {date_format} - {date_begin.getHours()}h
+        {date_begin.getMinutes() !== 0 ? date_begin.getMinutes() : ''} à&nbsp;
+        {date_end.getHours()}h
+        {date_end.getMinutes() !== 0 ? date_end.getMinutes() : ''}
+      </h4>
+      <BlockRenderer content={props.content} />
+    </article>
+  );
+}