Utilisation du composant Accordion du DS

packages/site/app/faq/ListeQuestions.tsx

@@ -0,0 +1,32 @@
+'use client';
+
+import {Accordion} from '@tet/ui';
+import {FaqData} from './page';
+import Markdown from '@components/markdown/Markdown';
+
+type ListeQuestionsProps = {
+  questions: FaqData[];
+};
+
+const ListeQuestions = ({questions}: ListeQuestionsProps) => {
+  return (
+    <div className="flex flex-col gap-4">
+      {questions.map(q => (
+        <div key={q.id}>
+          <Accordion
+            id={q.id.toString()}
+            title={q.titre}
+            content={
+              <Markdown
+                texte={q.contenu}
+                className="px-10 pt-6 border border-t-0 border-grey-4 rounded-b-lg"
+              />
+            }
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default ListeQuestions;

packages/site/app/faq/page.tsx

@@ -1,19 +1,19 @@
 'use server';
 
-import Accordion from '@components/accordion/Accordion';
 import Section from '@components/sections/Section';
 import {Metadata} from 'next';
 import {fetchCollection} from 'src/strapi/strapi';
 import {sortByRank} from 'src/utils/sortByRank';
 import ContactEquipe from './ContactEquipe';
+import ListeQuestions from './ListeQuestions';
 
 export async function generateMetadata(): Promise<Metadata> {
   return {
     title: 'FAQ',
   };
 }
 
-type FaqData = {
+export type FaqData = {
   id: number;
   titre: string;
   contenu: string;
@@ -40,18 +40,7 @@ const Faq = async () => {
     <>
       <Section>
         <h1>Questions fréquentes</h1>
-        {questions && (
-          <div>
-            {questions.map(q => (
-              <Accordion
-                key={q.id}
-                id={q.id.toString()}
-                title={q.titre}
-                content={q.contenu}
-              />
-            ))}
-          </div>
-        )}
+        {questions && <ListeQuestions questions={questions} />}
       </Section>
       <ContactEquipe />
     </>

packages/site/app/outil-numerique/QuestionsPlateforme.tsx

@@ -1,5 +1,8 @@
-import Accordion from '@components/accordion/Accordion';
+'use client';
+
+import Markdown from '@components/markdown/Markdown';
 import Section from '@components/sections/Section';
+import {Accordion} from '@tet/ui';
 
 type QuestionsPlateformeProps = {
   titre: string;
@@ -14,14 +17,20 @@ const QuestionsPlateforme = ({titre, liste}: QuestionsPlateformeProps) => {
   return (
     <Section containerClassName="bg-primary-0">
       <h2 className="text-center">{titre}</h2>
-      <div>
+      <div className="flex flex-col gap-2">
         {liste.map(l => (
-          <Accordion
-            key={l.id}
-            id={l.id.toString()}
-            title={l.titre}
-            content={l.contenu}
-          />
+          <div key={l.id}>
+            <Accordion
+              id={l.id.toString()}
+              title={l.titre}
+              content={
+                <Markdown
+                  texte={l.contenu}
+                  className="px-10 pt-6 border border-t-0 border-grey-4 rounded-b-lg"
+                />
+              }
+            />
+          </div>
         ))}
       </div>
     </Section>