feat: add integration on image infographies

app/(iframes)/iframes/image-infographie/[equivalent]/[index]/page.tsx

@@ -0,0 +1,20 @@
+import { computedEquivalents } from 'src/providers/equivalents'
+import ImageInfography from 'components/outils/equivalents/infographies/ImageInfography'
+import { imageInfographies } from 'components/outils/equivalents/infographies/list'
+
+type Props = {
+  params: Promise<{ index: number; equivalent: string }>
+}
+
+const page = async (props: Props) => {
+  const params = await props.params
+
+  const equivalent = computedEquivalents.find((equivalent) => equivalent.slug === params.equivalent)
+  const infographie = imageInfographies[params.equivalent][params.index]
+
+  return equivalent && infographie ? (
+    <ImageInfography equivalent={equivalent} image={infographie.image} alt={infographie.alt} index={params.index} />
+  ) : null
+}
+
+export default page

app/(iframes)/iframes/infographie/page.tsx

@@ -1,8 +1,22 @@
-import React from 'react'
-import IframeInfography from 'components/outils/equivalents/infographies/IframeInfography'
+import { computedEquivalents } from 'src/providers/equivalents'
+import Infography from 'components/outils/equivalents/infographies/Infography'
 
-const page = () => {
-  return <IframeInfography />
+type Props = {
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+}
+
+const page = async (props: Props) => {
+  const searchParams = await props.searchParams
+  const equivalents = ((searchParams['equivalents'] as string) || '').split(',')
+  if (equivalents.length === 0) {
+    return null
+  }
+  const equivalent = computedEquivalents.find((equivalent) => equivalent.slug === equivalents[0])
+  if (!equivalent) {
+    return null
+  }
+
+  return <Infography equivalent={equivalent} equivalents={equivalents} />
 }
 
 export default page

src/components/outils/equivalents/infographies/ImageInfography.tsx

@@ -24,8 +24,7 @@ const ImageInfography = ({
       tracking={`${getName('fr', equivalent)} image infographie ${index}`}
       overScreens={overScreens}
       secondary=''
-      smallPadding
-      withoutIntegration>
+      smallPadding>
       <img src={`/images/${image}`} alt={alt} className={styles.image} />
     </Shareable>
   )

src/components/shareable/overScreens/Values.tsx

@@ -92,6 +92,16 @@ export const overScreenEquivalentImageInfographyValues: (
       />
     ),
   },
+
+  integrer: {
+    title: 'integrate',
+    children: (
+      <Integrate
+        path={`/image-infographie/${equivalent.slug}/${index}`}
+        tracking={`${getName('fr', equivalent)} image infographie ${index}`}
+      />
+    ),
+  },
 })
 
 export const overScreenEquivalentValues: (equivalent: ComputedEquivalent) => Record<string, OverScreenInfo> = (