Use provided helper for classnames

Georiviere · Apr 9, 2024 · b7fdb18 · b7fdb18
1 parent be31c33
commit b7fdb18
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 12 deletions.
diff --git a/src/components/details.page.tsx b/src/components/details.page.tsx
@@ -36,7 +36,7 @@ export default function DetailsPageUI({ content }: Props) {
       {content.attachments.length > 0 && (
         <div className="-m-8 mb-6">
           <Carousel
-            className="min-w-full"
+            className="w-full"
             images={convertAttachementsToImages(content.attachments)}
             width={800}
             height={600}

diff --git a/src/components/map/geometry-item.tsx b/src/components/map/geometry-item.tsx
@@ -6,6 +6,7 @@ import { GeoJSONOptions, PathOptions } from 'leaflet';
 import { renderToStaticMarkup } from 'react-dom/server';
 import { Marker, Polygon, Polyline } from 'react-leaflet';
 
+import { cn } from '@/lib/utils';
 import { Icons } from '@/components/icons';
 import { DefaultMarker } from '@/components/map/default-marker';
 
@@ -46,16 +47,15 @@ export const GeometryItem = ({
   }
 
   const hasDetails = layer.type !== undefined && layer.url && properties?.id;
-  const pointerClassName = hasDetails ? '' : '!cursor-[unset]';
 
   const featureEventHandler = {
-    click: () => {
-      if (hasDetails) {
+    ...(hasDetails && {
+      click: () => {
         router.push(
           `/map/${layer?.type}/${properties?.id}?${params.toString()}`,
         );
-      }
-    },
+      },
+    }),
   };
 
   if (geometry.type === 'Point' || geometry.type === 'MultiPoint') {
@@ -118,7 +118,10 @@ export const GeometryItem = ({
                     mouseout: e => e.target.setStyle({ opacity: 0 }),
                     ...featureEventHandler,
                   }}
-                  className={`streams-hover ${pointerClassName}`}
+                  className={cn(
+                    'streams-hover',
+                    !hasDetails && '!cursor-[unset]',
+                  )}
                 >
                   <GeometryTooltip properties={properties} layer={layer} />
                 </Polyline>
@@ -129,7 +132,7 @@ export const GeometryItem = ({
             <Polyline
               positions={group.map(([lat, lng]) => [lng, lat])}
               pathOptions={options.style as GeoJSONOptions}
-              className={`${layer.type} ${pointerClassName}`}
+              className={cn(layer.type, !hasDetails && '!cursor-[unset]')}
               eventHandlers={featureEventHandler}
             >
               <GeometryTooltip properties={properties} layer={layer} />
@@ -163,7 +166,10 @@ export const GeometryItem = ({
                 }),
               ...featureEventHandler,
             }}
-            className={`transition-[fill-opacity] ${pointerClassName}`}
+            className={cn(
+              'transition-[fill-opacity]',
+              !hasDetails && '!cursor-[unset]',
+            )}
             pane="tilePane"
           >
             <GeometryTooltip properties={properties} layer={layer} />

diff --git a/src/components/metadata-list.tsx b/src/components/metadata-list.tsx
@@ -1,6 +1,7 @@
 import Image from 'next/image';
 import { useTranslations } from 'next-intl';
 
+import { cn } from '@/lib/utils';
 import { Badge } from '@/components/ui/badge';
 import { Icon, Icons, propsForSVGPresentation } from '@/components/icons';
 
@@ -44,13 +45,12 @@ const MetadataItem = ({
     <div className="flex flex-row flex-wrap items-center justify-center gap-1">
       <dt>
         <Icon
-          className="text-primary"
+          className={cn('text-primary', small && 'w-4 h-4')}
           {...propsForSVGPresentation}
-          {...(small ? { width: 18, height: 18 } : {})}
         />
         <span className="sr-only">{t(type)}</span>
       </dt>
-      <dd>{meters ? <MeterLength length={meters} /> : value}</dd>
+      <dd>{meters !== undefined ? <MeterLength length={meters} /> : value}</dd>
     </div>
   );
 };