Improve DetailsGear component

GeotrekCE · Oct 17, 2024 · a91ea19 · a91ea19
1 parent 88cdfe3
commit a91ea19
Showing 1 changed file with 9 additions and 9 deletions.
diff --git a/frontend/src/components/pages/details/components/DetailsGear/DetailsGear.tsx b/frontend/src/components/pages/details/components/DetailsGear/DetailsGear.tsx
@@ -1,23 +1,23 @@
 import parse from 'html-react-parser';
 import { BackPack } from 'components/Icons/BackPack';
+import { cn } from 'services/utils/cn';
+import { HTMLAttributes } from 'react';
 
-interface DetailsGearProps {
-  className?: string;
+interface DetailsGearProps extends HTMLAttributes<HTMLDivElement> {
   text: string;
 }
 
 export const DetailsGear: React.FC<DetailsGearProps> = ({ className, text }) => {
   return (
     <div
       id="details_recommandationGear"
-      className={`py-4 desktop:py-5 px-3 desktop:px-4 flex
-      rounded-2xl border-2 border-solid border-greyDarkColored
-      ${className ?? ''}`}
+      className={cn(
+        'py-4 desktop:py-5 px-3 desktop:px-4 gap-2 desktop:gap-4 flex justify-start items-center rounded-2xl border-2 border-solid border-greyDarkColored',
+        className,
+      )}
     >
-      <div className="mr-2 desktop:mr-4 shrink-0 size-6 desktop:size-12 self-start">
-        <BackPack />
-      </div>
-      <div className="text-greyDarkColored desktop:font-bold text-Mobile-C2 desktop:text-P1 my-auto">
+      <BackPack className="shrink-0 size-6 desktop:size-12" aria-hidden />
+      <div className="text-greyDarkColored desktop:font-bold text-Mobile-C2 desktop:text-P1">
         <div className="content-WYSIWYG">{parse(text)}</div>
       </div>
     </div>