fix: home urgent tags, shelter page card infos and expand tags

SOS-RS · May 6, 2024 · be5e733 · be5e733
1 parent b2e559f
commit be5e733
Show file tree

Hide file tree

Showing 6 changed files with 121 additions and 58 deletions.
diff --git a/src/components/CardAboutShelter/CardAboutShelter.tsx b/src/components/CardAboutShelter/CardAboutShelter.tsx
@@ -3,67 +3,68 @@ import {
   UsersRound,
   HandHeart,
   PawPrint,
-  Phone,
   Landmark,
+  Smartphone,
 } from 'lucide-react';
 
 import { Card } from '../ui/card';
 import { ICardAboutShelter } from './types';
+import { InfoRow } from './components';
 
 const CardAboutShelter = (props: ICardAboutShelter) => {
   const { shelter } = props;
+
+  const check = (v?: string | number | boolean | null) => {
+    return (
+      (v !== undefined && v !== null) ||
+      (typeof v === 'number' && v === 0) ||
+      (typeof v === 'boolean' && v)
+    );
+  };
+
   return (
-    <Card className="gap-2 p-4 flex flex-col bg-[#E8F0F8] text-sm">
-      <div className="text-[#646870] font-medium ">Sobre o abrigo</div>
-      <div className="flex gap-2 font-medium ">
-        <Home />
-        <h1> {shelter.address} </h1>
-      </div>
-      <div className="flex gap-2 font-medium ">
-        <UsersRound />
-        <h1>Capacidade do abrigo:</h1>
-        <h1 className="font-bold">
-          {typeof shelter.capacity !== 'number'
-            ? 'Não informado'
-            : `${shelter.capacity} pessoas`}
-        </h1>
-      </div>
-      <div className="flex gap-2 font-medium ">
-        <HandHeart />
-        <h1>Pessoas abrigadas:</h1>
-        <h1 className="font-bold">
-          {typeof shelter.capacity !== 'number'
-            ? 'Não informado'
-            : `${shelter.capacity} pessoas`}{' '}
-        </h1>
-      </div>
-      <div className="flex gap-2 font-medium ">
-        <PawPrint />
-        <h1>
-          {shelter.petFriendly
-            ? 'O abrigo aceita animais'
-            : 'O abrigo não aceita animais'}
-        </h1>
-      </div>
-      <div className="flex gap-2 font-medium ">
-        <Phone />
-        <h1>Contato:</h1>
-        <h1 className="font-medium">
-          {typeof shelter.contact !== 'string'
-            ? 'Não informado'
-            : shelter.contact}
-        </h1>
-      </div>
-      <div className="flex flex-col font-medium ">
-        <div className="flex gap-2 ">
-          <Landmark />
-          <h1>Chaves Pix:</h1>
-        </div>
-        <div className="pl-8">
-          <h1 className="font-medium">
-            {typeof shelter.pix !== 'string' ? 'Não informado' : shelter.pix}
-          </h1>
-        </div>
+    <Card className="flex flex-col gap-2 p-4 bg-[#E8F0F8] text-sm">
+      <div className="text-[#646870] font-medium">Sobre o abrigo</div>
+      <div className="flex flex-col flex-wrap gap-3">
+        <InfoRow icon={<Home />} label={shelter.address} />
+        <InfoRow
+          icon={<UsersRound />}
+          label="Capacidade do abrigo:"
+          value={
+            check(shelter.capacity)
+              ? `${shelter.capacity} pessoas`
+              : 'Não informado'
+          }
+        />
+        <InfoRow
+          icon={<HandHeart />}
+          label="Pessoas abrigadas:"
+          value={
+            check(shelter.capacity)
+              ? `${shelter.capacity} pessoas`
+              : 'Não informado'
+          }
+        />
+        <InfoRow
+          icon={<PawPrint />}
+          label={
+            check(shelter.petFriendly)
+              ? 'O abrigo aceita animais'
+              : 'O abrigo não aceita animais'
+          }
+        />
+        <InfoRow
+          icon={<Smartphone />}
+          label="Contato:"
+          value={
+            check(shelter.contact) ? `${shelter.contact}` : 'Não informado'
+          }
+        />
+        <InfoRow
+          icon={<Landmark />}
+          label="Chave Pix:"
+          value={check(shelter.pix) ? `${shelter.pix}` : 'Não informado'}
+        />
       </div>
     </Card>
   );

diff --git a/src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx b/src/components/CardAboutShelter/components/InfoRow/InfoRow.tsx
@@ -0,0 +1,41 @@
+import React, { Fragment } from 'react';
+
+import { IInfoRowProps } from './types';
+import { cn } from '@/lib/utils';
+
+const InfoRow = React.forwardRef<HTMLDivElement, IInfoRowProps>(
+  (props, ref) => {
+    const { icon, label, value, className = '', ...rest } = props;
+    const isLink = value?.startsWith('http');
+    const ValueComp = !value ? (
+      <Fragment />
+    ) : isLink ? (
+      <a
+        className="text-blue-500 break-all cursor-pointer hover:underline"
+        onClick={() => window.open(value, '_blank')}
+      >
+        {value}
+      </a>
+    ) : (
+      <h1 className="font-semibold">{value}</h1>
+    );
+
+    return (
+      <div
+        ref={ref}
+        className={cn('flex items-start gap-2 font-medium w-full', className)}
+        {...rest}
+      >
+        {React.cloneElement(icon as any, {
+          className: 'min-w-5 min-h-5 w-5 h-5',
+        })}
+        <h1 className={cn('font-normal', value ? 'text-nowrap' : '')}>
+          {label}
+        </h1>
+        {ValueComp}
+      </div>
+    );
+  }
+);
+
+export { InfoRow };
diff --git a/src/components/CardAboutShelter/components/InfoRow/index.ts b/src/components/CardAboutShelter/components/InfoRow/index.ts
@@ -0,0 +1,3 @@
+import { InfoRow } from './InfoRow';
+
+export { InfoRow };
diff --git a/src/components/CardAboutShelter/components/InfoRow/types.ts b/src/components/CardAboutShelter/components/InfoRow/types.ts
@@ -0,0 +1,5 @@
+export interface IInfoRowProps extends React.ComponentPropsWithoutRef<'div'> {
+  label: string;
+  value?: string;
+  icon: React.ReactNode;
+}
diff --git a/src/components/CardAboutShelter/components/index.ts b/src/components/CardAboutShelter/components/index.ts
@@ -0,0 +1,3 @@
+import { InfoRow } from './InfoRow';
+
+export { InfoRow };
diff --git a/src/components/ShelterListItem/ShelterListItem.tsx b/src/components/ShelterListItem/ShelterListItem.tsx
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import { ChevronRight } from 'lucide-react';
 
 import { IShelterListItemProps, IShelterAvailabilityProps } from './types';
-import { cn, getAvailabilityProps } from '@/lib/utils';
+import { cn, getAvailabilityProps, getSupplyPriorityProps } from '@/lib/utils';
 import { Separator } from '../ui/separator';
 import { Chip } from '../Chip';
 import { Button } from '../ui/button';
@@ -21,6 +21,14 @@ const ShelterListItem = (props: IShelterListItemProps) => {
       [capacity, shelteredPeople]
     );
 
+  const tags = useMemo(
+    () =>
+      data.supplies
+        .filter((s) => s.priority >= SupplyPriority.Needing)
+        .sort((a, b) => b.priority - a.priority),
+    [data.supplies]
+  );
+
   return (
     <div className="flex flex-col p-4 w-full border-2 border-border rounded-md gap-1 relative">
       <Button
@@ -50,11 +58,13 @@ const ShelterListItem = (props: IShelterListItemProps) => {
             Necessita urgente de doações de:
           </p>
           <div className="flex gap-2 flex-wrap">
-            {data.supplies
-              .filter((s) => s.priority >= SupplyPriority.Urgent)
-              .map((s, idx) => (
-                <Chip variant="danger" key={idx} label={s.name} />
-              ))}
+            {tags.map((s, idx) => (
+              <Chip
+                className={getSupplyPriorityProps(s.priority).className}
+                key={idx}
+                label={s.name}
+              />
+            ))}
           </div>
         </div>
       )}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import { InfoRow } from './InfoRow';

		export { InfoRow };