Ajout d'icônes dans les listes

incubateur-ademe · Jan 22, 2024 · bef37b5 · bef37b5
1 parent 34730d1
commit bef37b5
Show file tree

Hide file tree

Showing 15 changed files with 336 additions and 67 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -41,6 +41,7 @@
     "react-refresh": "^0.11.0"
   },
   "dependencies": {
+    "react-icons": "^5.0.1",
     "react-markdown": "^9.0.1"
   }
 }
diff --git a/packages/site/app/programme/[uid]/ListeGallerieService.tsx b/packages/site/app/programme/[uid]/ListeGallerieService.tsx
@@ -2,6 +2,7 @@ import MasonryGallery from '@components/galleries/MasonryGallery';
 import {Liste} from './types';
 import Markdown from '@components/markdown/Markdown';
 import {StrapiImage} from '@components/strapiImage/StrapiImage';
+import ReactIcon from '@components/react-icons/ReactIcon';
 
 const ListeGallerieService = ({liste}: {liste: Liste}) => {
   return (
@@ -12,13 +13,22 @@ const ListeGallerieService = ({liste}: {liste: Liste}) => {
           <div key={l.id}>
             <div key={l.id} className="rounded-2xl p-8 border border-primary-4">
               <div>
-                {!!l.preTitre && (
-                  <div className="text-xl text-white font-bold bg-primary-6 rounded-full p-1 w-fit min-w-[36px] mb-3">
-                    <div className="mx-auto w-fit">{l.preTitre}</div>
-                  </div>
-                )}
-                <h4 className="text-primary-8">{l.titre}</h4>
-                <Markdown texte={l.texte} className="paragraphe-16" />
+                <div className="flex items-center gap-2 mb-3">
+                  {!!l.icone && (
+                    <ReactIcon
+                      icon={l.icone}
+                      className="text-4xl text-primary-6"
+                    />
+                  )}
+                  {!!l.preTitre && (
+                    <div className="text-xl text-white font-bold bg-primary-6 rounded-full p-1 w-fit min-w-[36px]">
+                      <div className="mx-auto w-fit">{l.preTitre}</div>
+                    </div>
+                  )}
+                </div>
+
+                {!!l.titre && <h4 className="text-primary-8">{l.titre}</h4>}
+                <Markdown texte={l.texte} className="paragraphe-16 -mb-6" />
                 {!!l.image && (
                   <StrapiImage
                     data={l.image}

diff --git a/packages/site/app/programme/[uid]/ListeGrilleService.tsx b/packages/site/app/programme/[uid]/ListeGrilleService.tsx
@@ -1,6 +1,7 @@
 import Markdown from '@components/markdown/Markdown';
 import {Liste} from './types';
 import {StrapiImage} from '@components/strapiImage/StrapiImage';
+import ReactIcon from '@components/react-icons/ReactIcon';
 
 const ListeGrilleService = ({liste}: {liste: Liste}) => {
   return (
@@ -9,19 +10,27 @@ const ListeGrilleService = ({liste}: {liste: Liste}) => {
         {liste.map(l => (
           <div key={l.id} className="rounded-2xl p-12 bg-white">
             <div>
-              {!!l.preTitre && (
-                <div className="text-primary-10 font-bold text-base">
-                  {l.preTitre}
-                </div>
-              )}
+              <div className="flex items-center gap-2">
+                {!!l.icone && (
+                  <ReactIcon
+                    icon={l.icone}
+                    className="text-2xl text-primary-10"
+                  />
+                )}
+                {!!l.preTitre && (
+                  <div className="text-primary-10 font-bold text-base">
+                    {l.preTitre}
+                  </div>
+                )}
+              </div>
               {!!l.titre && (
                 <div className="text-orange-1 uppercase text-5xl font-extrabold mb-4">
                   {l.titre}
                 </div>
               )}
               <Markdown
                 texte={l.texte}
-                className="paragraphe-16 paragraphe-primary-9"
+                className="paragraphe-16 paragraphe-primary-9 -mb-6"
               />
               {!!l.image && (
                 <StrapiImage

diff --git a/packages/site/app/programme/[uid]/ListeVerticaleService.tsx b/packages/site/app/programme/[uid]/ListeVerticaleService.tsx
@@ -1,5 +1,6 @@
 import {Liste} from './types';
 import Markdown from '@components/markdown/Markdown';
+import ReactIcon from '@components/react-icons/ReactIcon';
 import {StrapiImage} from '@components/strapiImage/StrapiImage';
 
 const ListeVerticaleService = ({liste}: {liste: Liste}) => {
@@ -18,7 +19,13 @@ const ListeVerticaleService = ({liste}: {liste: Liste}) => {
             />
           )}
           <div className="flex flex-col gap-4">
-            {!!l.titre && <h4 className="mb-0">{l.titre}</h4>}
+            <div className="flex items-center gap-2">
+              {!!l.icone && (
+                <ReactIcon icon={l.icone} className="text-3xl text-primary-9" />
+              )}
+              {!!l.titre && <h4 className="mb-0">{l.titre}</h4>}
+            </div>
+
             <Markdown texte={l.texte} className="paragraphe-16 -mb-6" />
           </div>
         </div>

diff --git a/packages/site/app/programme/[uid]/types.ts b/packages/site/app/programme/[uid]/types.ts
@@ -40,6 +40,7 @@ export type ListeFetchedData = {
   introduction?: string;
   liste: {
     id: number;
+    icone?: string;
     pre_titre?: string;
     titre?: string;
     texte: string;
@@ -51,6 +52,7 @@ export type ListeFetchedData = {
 export type Liste = {
   id: number;
   preTitre?: string;
+  icone?: string;
   titre?: string;
   texte: string;
   image?: StrapiItem;

diff --git a/packages/site/app/programme/[uid]/utils.ts b/packages/site/app/programme/[uid]/utils.ts
@@ -73,6 +73,7 @@ export const getServiceStrapiData = async (uid: string) => {
               introduction: listeData.introduction,
               liste: listeData.liste.map(ct => ({
                 id: ct.id,
+                icone: ct.icone,
                 preTitre: ct.pre_titre,
                 titre: ct.titre,
                 texte: ct.texte,

diff --git a/packages/site/components/react-icons/ReactIcon.tsx b/packages/site/components/react-icons/ReactIcon.tsx
@@ -0,0 +1,17 @@
+import * as ReactIcons from 'react-icons/ri';
+
+interface IIconComponent {
+  icon: string;
+  className?: string;
+}
+type TReactIcon = keyof typeof ReactIcons;
+
+const ReactIcon: React.FC<IIconComponent> = ({icon, className}) => {
+  const DynamicIconComponent = ReactIcons[icon as TReactIcon];
+
+  if (DynamicIconComponent === undefined) return <></>;
+
+  return <DynamicIconComponent className={className} />;
+};
+
+export default ReactIcon;
diff --git a/strapi/.strapi/client/app.js b/strapi/.strapi/client/app.js
@@ -4,11 +4,13 @@
  */
 import i18N from "@strapi/plugin-i18n/strapi-admin";
 import usersPermissions from "@strapi/plugin-users-permissions/strapi-admin";
+import reactIcons from "strapi-plugin-react-icons/strapi-admin";
 import { renderAdmin } from "@strapi/strapi/admin";
 
 renderAdmin(document.getElementById("strapi"), {
   plugins: {
     i18n: i18N,
     "users-permissions": usersPermissions,
+    "react-icons": reactIcons,
   },
 });
diff --git a/strapi/config/plugins.ts b/strapi/config/plugins.ts
@@ -0,0 +1 @@
+export default ({ env }) => ({ "react-icons": true });
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export default ({ env }) => ({ "react-icons": true });