Merge pull request #14 from SOS-RS/feat/verified

feat: added verified seal to shelters

Author: rhuam

src/components/ShelterListItem/ShelterListItem.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import { format } from 'date-fns';
 import { useNavigate } from 'react-router-dom';
-import { ChevronRight } from 'lucide-react';
+import { BadgeCheck, ChevronRight } from 'lucide-react';
 
 import { IShelterListItemProps, IShelterAvailabilityProps } from './types';
 import { cn, getAvailabilityProps, getSupplyPriorityProps } from '@/lib/utils';
@@ -38,12 +38,17 @@ const ShelterListItem = (props: IShelterListItemProps) => {
       >
         <ChevronRight className="h-5 w-5" />
       </Button>
-      <h3
-        className="font-semibold text-lg mr-12 hover:cursor-pointer hover:text-slate-500"
-        onClick={() => navigate(`/abrigo/${data.id}`)}
-      >
-        {data.name}
-      </h3>
+      <div className="flex items-center gap-1">
+        {data.verified && (
+          <BadgeCheck className="h-5 w-5 stroke-white fill-red-600" />
+        )}
+        <h3
+          className="font-semibold text-lg mr-12 hover:cursor-pointer hover:text-slate-500"
+          onClick={() => navigate(`/abrigo/${data.id}`)}
+        >
+          {data.name}
+        </h3>
+      </div>
       <h6 className={cn('font-semibold text-md', availabilityClassName)}>
         {availability}
       </h6>

src/hooks/useShelter/types.ts

@@ -8,6 +8,7 @@ export interface IUseShelterData {
   contact?: string | null;
   petFriendly?: boolean | null;
   prioritySum: number;
+  verified: boolean;
   latitude?: string | null;
   longitude?: string | null;
   shelterSupplies: IUseShelterDataSupply[];

src/hooks/useShelters/types.ts

@@ -8,6 +8,7 @@ export interface IUseSheltersData {
   contact?: string | null;
   petFriendly?: boolean | null;
   prioritySum: number;
+  verified: boolean;
   latitude?: string | null;
   longitude?: string | null;
   createdAt: string;

src/pages/Shelter/Shelter.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { ChevronLeft, Pencil } from 'lucide-react';
+import { BadgeCheck, ChevronLeft, Pencil } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { CardAboutShelter, Header, LoadingScreen } from '@/components';
@@ -53,9 +53,14 @@ const Shelter = () => {
         }
       />
       <div className="p-4 flex flex-col max-w-5xl w-full">
-        <h1 className="text-[#2f2f2f] font-semibold text-2xl">
-          {shelter.name}
-        </h1>
+        <div className="flex items-center gap-1">
+          {shelter.verified && (
+            <BadgeCheck className="h-6 w-6 stroke-white fill-red-600" />
+          )}
+          <h1 className="text-[#2f2f2f] font-semibold text-2xl">
+            {shelter.name}
+          </h1>
+        </div>
         <div className="flex flex-1 items-center justify-between">
           <h1 className={cn(availabilityClassName, 'font-semibold')}>
             {availability}