feat(contribution-item): add badge group for better alignment

dataesr · Jan 8, 2025 · 2ba3281 · 2ba3281
1 parent ae023af
commit 2ba3281
Showing 1 changed file with 37 additions and 48 deletions.
diff --git a/client/src/pages/contact-contributionbyobject-page/components/contribution-item.tsx b/client/src/pages/contact-contributionbyobject-page/components/contribution-item.tsx
@@ -1,5 +1,5 @@
 import { useState } from "react";
-import { Badge, Col, Row, Text, Notice, Title } from "@dataesr/dsfr-plus";
+import { Badge, Col, Row, Text, Notice, Title, BadgeGroup } from "@dataesr/dsfr-plus"
 import ContributorInfo from "./contributor-info";
 import StaffActions from "./staff-action";
 import {
@@ -37,40 +37,38 @@ const ContributionItem: React.FC<ContributionItemProps> = ({
   return (
     <>
       <Row className="fr-mt-3w">
-        {data?.tags?.length > 0 && (
-          <Badge size="sm" color="green-menthe" className="fr-mr-1w fr-mb-1w">
-            {data.tags.join(", ")}
-          </Badge>
-        )}
-        {data?.status && (
-          <Badge
-            size="sm"
-            color={BadgeStatus({ status: data?.status })}
-            className="fr-mr-1w fr-mb-1w"
-          >
-            {StatusLabel({ status: data?.status })}
-          </Badge>
-        )}
-        {firstResponse?.team && (
-          <Badge size="sm" color="blue-ecume" className="fr-mr-1w fr-mb-1w">
-            {`Réponse envoyée par ${firstResponse.team}`}
-          </Badge>
-        )}
-        {data?.comment && data?.team?.length > 0 && (
-          <Badge size="sm" color="green-emeraude" className="fr-mr-1w fr-mb-1w">
-            {`Commenté par ${data.team[0]}`}
-          </Badge>
-        )}
-        {data?.type && (
-          <Badge
-            size="sm"
-            color={BadgeColor({ type: data.type })}
-            className="fr-mr-1w fr-mb-1w"
-            icon={typeIcon({ icon: data.type })}
-          >
-            {TypeLabel({ type: data.type })}
-          </Badge>
-        )}
+        <BadgeGroup>
+          {data?.tags?.length > 0 && (
+            <Badge size="sm" color="green-menthe" className="fr-mr-1w fr-mb-1w">
+              {data.tags.join(", ")}
+            </Badge>
+          )}
+          {data?.status && (
+            <Badge size="sm" color={BadgeStatus({ status: data?.status })} className="fr-mr-1w fr-mb-1w">
+              {StatusLabel({ status: data?.status })}
+            </Badge>
+          )}
+          {firstResponse?.team && (
+            <Badge size="sm" color="blue-ecume" className="fr-mr-1w fr-mb-1w">
+              {`Réponse envoyée par ${firstResponse.team}`}
+            </Badge>
+          )}
+          {data?.comment && data?.team?.length > 0 && (
+            <Badge size="sm" color="green-emeraude" className="fr-mr-1w fr-mb-1w">
+              {`Commenté par ${data.team[0]}`}
+            </Badge>
+          )}
+          {data?.type && (
+            <Badge
+              size="sm"
+              color={BadgeColor({ type: data.type })}
+              className="fr-mr-1w fr-mb-1w"
+              icon={typeIcon({ icon: data.type })}
+            >
+              {TypeLabel({ type: data.type })}
+            </Badge>
+          )}
+        </BadgeGroup>
       </Row>
       <Row>
         <Col>
@@ -80,9 +78,7 @@ const ContributionItem: React.FC<ContributionItemProps> = ({
               className={`copy-button ${copiedId === data?.id ? "copied" : ""}`}
               onClick={() => copyToClipboard(data?.id)}
             >
-              {copiedId === data?.id && (
-                <span className="copied-text">Copié</span>
-              )}
+              {copiedId === data?.id && <span className="copied-text">Copié</span>}
               <FaCopy size={14} color="#2196f3" className="copy-icon" />
             </button>
           </Title>
@@ -93,22 +89,15 @@ const ContributionItem: React.FC<ContributionItemProps> = ({
           )}
         </Col>
         <Text size="sm">
-          <i className="date">
-            Reçu le {new Date(data?.created_at)?.toLocaleDateString()}
-          </i>
+          <i className="date">Reçu le {new Date(data?.created_at)?.toLocaleDateString()}</i>
         </Text>
       </Row>
       <Col>
-        <ContributorInfo
-          data={data}
-          highlightedQuery={highlightedQuery}
-          refetch={refetch}
-          allTags={allTags}
-        />
+        <ContributorInfo data={data} highlightedQuery={highlightedQuery} refetch={refetch} allTags={allTags} />
         <StaffActions url={url} refetch={refetch} data={data} />
       </Col>
     </>
-  );
+  )
 };
 
 export default ContributionItem;