shelter: make entire card clickable and desktop styles

BetterAngelsLA · Dec 23, 2024 · 6534fbb · 6534fbb
1 parent dc608f0
commit 6534fbb
Showing 1 changed file with 38 additions and 20 deletions.
diff --git a/apps/shelter-web/src/app/shared/components/shelter/shelterCard.tsx b/apps/shelter-web/src/app/shared/components/shelter/shelterCard.tsx
@@ -1,5 +1,6 @@
 import { LocationIcon } from '@monorepo/react/icons';
 import { useNavigate } from 'react-router-dom';
+import { mergeCss } from '../../utils/styles/mergeCss';
 import { TLatLng } from '../map/types.maps';
 import { DistanceAway } from './distanceAway';
 
@@ -27,17 +28,32 @@ export function ShelterCard(props: TShelterCard) {
   const {
     shelter: { id, name, heroImage, distanceInMiles, location },
     originCoordinates,
-    className = '',
+    className,
   } = props;
 
   const navigate = useNavigate();
 
   const formattedAddress = location?.place.replace(/, USA$/, '');
 
+  const parentCss = [
+    'flex',
+    'flex-col',
+    'md:flex-row',
+    'cursor-pointer',
+    className,
+  ];
+
+  const heroCss = ['md:w-96', 'md:mr-4'];
+
+  const contentCss = ['mt-4'];
+
   return (
-    <div className={className}>
+    <div
+      className={mergeCss(parentCss)}
+      onClick={() => navigate(`/shelter/${id}`)}
+    >
       {heroImage && (
-        <div onClick={() => navigate(`/shelter/${id}`)} className="mb-4">
+        <div className={mergeCss(heroCss)}>
           <img
             src={heroImage}
             alt={`hero for ${name}`}
@@ -47,27 +63,29 @@ export function ShelterCard(props: TShelterCard) {
         </div>
       )}
 
-      <div className="font-semibold text-sm leading-[1.125rem] tracking-[.03125rem]">
-        {name}
-      </div>
+      <div className={mergeCss(contentCss)}>
+        <div className="font-semibold text-sm md:text-lg leading-[1.125rem] tracking-[.03125rem]">
+          {name}
+        </div>
 
-      {formattedAddress && (
-        <div className="text-xs mt-1.5 flex items-start">
-          <LocationIcon className="h-4 mr-2" />
+        {formattedAddress && (
+          <div className="text-xs md:text-sm mt-1.5 flex items-start">
+            <LocationIcon className="h-4 mr-2" />
 
-          <div className="flex-inline flex-wrap">
-            <span>{formattedAddress}</span>
+            <div className="flex-inline flex-wrap">
+              <span>{formattedAddress}</span>
 
-            <DistanceAway
-              className="ml-1 inline"
-              distanceInMiles={distanceInMiles}
-              originCoordinates={originCoordinates}
-              targetCoordinates={location}
-              formatFn={(distance) => `(${distance} away)`}
-            />
+              <DistanceAway
+                className="ml-1 inline"
+                distanceInMiles={distanceInMiles}
+                originCoordinates={originCoordinates}
+                targetCoordinates={location}
+                formatFn={(distance) => `(${distance} away)`}
+              />
+            </div>
           </div>
-        </div>
-      )}
+        )}
+      </div>
     </div>
   );
 }