Merge pull request #928 from parlemonde/ft-VIL-73-74-75

Ft vil 73 74 75

src/components/admin/dashboard-statistics/GlobalStats.tsx

@@ -4,6 +4,7 @@ import AccessTimeIcon from '@mui/icons-material/AccessTime';
 import VisibilityIcon from '@mui/icons-material/Visibility';
 
 import AverageStatsCard from './cards/AverageStatsCard/AverageStatsCard';
+import ClassesExchangesCard from './cards/ClassesExchangesCard/ClassesExchangesCard';
 import StatsCard from './cards/StatsCard/StatsCard';
 
 const GlobalStats = () => {
@@ -22,6 +23,9 @@ const GlobalStats = () => {
           Nombre de connexions moyen par classe
         </AverageStatsCard>
       </div>
+      <div>
+        <ClassesExchangesCard totalPublications={68} totalComments={42} totalVideos={56} />
+      </div>
     </>
   );
 };

src/components/admin/dashboard-statistics/cards/ClassesExchangesCard/ClassesExchangesCard.module.css

@@ -0,0 +1,30 @@
+.cardContainer {
+    background-color: #F5F5F5;
+    padding: .5rem 1rem;
+    border-radius: 1rem;
+    font-weight: 600;
+}
+
+.cardContainer>div {
+    display: flex;
+    justify-content: space-around;
+    flex-wrap: wrap;
+}
+
+.cardContainerExchange>div {
+    font-size: 3rem;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    color: #DAD7FE;
+}
+
+.cardContainerExchange>div>p {
+    align-items: center;
+    color: #4C3ED9;
+    margin: 0;
+    padding: 0;
+    display: flex;
+}

src/components/admin/dashboard-statistics/cards/ClassesExchangesCard/ClassesExchangesCard.tsx

@@ -0,0 +1,46 @@
+import React from 'react';
+
+import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
+import DescriptionIcon from '@mui/icons-material/Description';
+import YouTubeIcon from '@mui/icons-material/YouTube';
+
+import styles from './ClassesExchangesCard.module.css';
+
+interface ClassesExchangesCardProps {
+  totalPublications: number;
+  totalComments: number;
+  totalVideos: number;
+}
+
+const ClassesExchangesCard = ({ totalPublications, totalComments, totalVideos }: ClassesExchangesCardProps) => {
+  return (
+    <div className={styles.cardContainer}>
+      <p>Résumé des échanges sur 1village</p>
+      <div>
+        <div className={styles.cardContainerExchange}>
+          <div>
+            <DescriptionIcon sx={{ fontSize: 'inherit' }} />
+            <p>{totalPublications}</p>
+          </div>
+          <p>Total des publications</p>
+        </div>
+        <div className={styles.cardContainerExchange}>
+          <div>
+            <ChatBubbleOutlineIcon sx={{ fontSize: 'inherit' }} />
+            <p>{totalComments}</p>
+          </div>
+          <p>Commentaires</p>
+        </div>
+        <div className={styles.cardContainerExchange}>
+          <div>
+            <YouTubeIcon sx={{ fontSize: 'inherit' }} />
+            <p>{totalVideos}</p>
+          </div>
+          <p>Vidéos en ligne</p>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ClassesExchangesCard;