From c01f88bf4938d51895cdc9b6c6b4f756a8013c7f Mon Sep 17 00:00:00 2001
From: Marine Heckler <marine.heckler@beta.gouv.fr>
Date: Wed, 9 Oct 2024 18:10:08 +0200
Subject: [PATCH] =?UTF-8?q?Ajout=20de=20l'onglet=20indicateurs=20sur=20les?=
 =?UTF-8?q?=20pages=20collectivit=C3=A9=20personnalis=C3=A9es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../[code]/[name]/PageContent.tsx             | 28 +++++++++++++++
 .../app/collectivites/[code]/[name]/page.tsx  | 36 +++++++++++--------
 2 files changed, 49 insertions(+), 15 deletions(-)
 create mode 100644 packages/site/app/collectivites/[code]/[name]/PageContent.tsx

diff --git a/packages/site/app/collectivites/[code]/[name]/PageContent.tsx b/packages/site/app/collectivites/[code]/[name]/PageContent.tsx
new file mode 100644
index 00000000000..59454c47192
--- /dev/null
+++ b/packages/site/app/collectivites/[code]/[name]/PageContent.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { Tab, Tabs } from '@tet/ui';
+
+type PageContentType = {
+  indicateurs: JSX.Element | null;
+  programme: JSX.Element | null;
+};
+
+const PageContent = ({ indicateurs, programme }: PageContentType) => {
+  if (!indicateurs && !programme)
+    return <div className="col-span-full md:col-span-7 lg:col-span-8" />;
+
+  if (indicateurs && programme) {
+    return (
+      <Tabs
+        className="col-span-full md:col-span-7 lg:col-span-8"
+        tabsListClassName="!bg-primary-1"
+      >
+        <Tab label="Indicateurs locaux">{indicateurs}</Tab>
+        <Tab label="Programme T.E.T.E.">{programme}</Tab>
+      </Tabs>
+    );
+  } else if (indicateurs) return indicateurs;
+  else if (programme) return programme;
+};
+
+export default PageContent;
diff --git a/packages/site/app/collectivites/[code]/[name]/page.tsx b/packages/site/app/collectivites/[code]/[name]/page.tsx
index 2ccd96344c7..3bf7e66b793 100644
--- a/packages/site/app/collectivites/[code]/[name]/page.tsx
+++ b/packages/site/app/collectivites/[code]/[name]/page.tsx
@@ -17,6 +17,7 @@ import AccesCompte from './AccesCompte';
 import { getUpdatedMetadata } from '@tet/site/src/utils/getUpdatedMetadata';
 import HistoriqueLabellisation from './HistoriqueLabellisation';
 import { notFound } from 'next/navigation';
+import PageContent from './PageContent';
 
 export async function generateMetadata(
   { params }: { params: { code: string } },
@@ -141,21 +142,26 @@ const DetailCollectivite = async ({ params }: { params: { code: string } }) => {
       </div>
 
       {/* Contenu */}
-      {strapiData?.contenu ? (
-        <ContenuCollectivite contenu={strapiData.contenu} />
-      ) : strapiDefaultData ? (
-        <IndicateursCollectivite
-          defaultData={strapiDefaultData.indicateurs}
-          indicateurs={{
-            artificialisation_sols:
-              collectiviteData.collectivite.indicateur_artificialisation,
-            gaz_effet_serre:
-              collectiviteData.collectivite.indicateurs_gaz_effet_serre,
-          }}
-        />
-      ) : (
-        <div className="col-span-full md:col-span-7 lg:col-span-8" />
-      )}
+      <PageContent
+        indicateurs={
+          strapiDefaultData ? (
+            <IndicateursCollectivite
+              defaultData={strapiDefaultData.indicateurs}
+              indicateurs={{
+                artificialisation_sols:
+                  collectiviteData.collectivite.indicateur_artificialisation,
+                gaz_effet_serre:
+                  collectiviteData.collectivite.indicateurs_gaz_effet_serre,
+              }}
+            />
+          ) : null
+        }
+        programme={
+          strapiData?.contenu ? (
+            <ContenuCollectivite contenu={strapiData.contenu} />
+          ) : null
+        }
+      />
     </Section>
   );
 };