Merge pull request #16 from filipepacheco/feat/change-verified-badge-color

feat: change verified badge color, position and added tooltip

Author: fagundesjg

src/components/ShelterListItem/ShelterListItem.tsx

@@ -1,14 +1,15 @@
 import { useMemo } from 'react';
 import { format } from 'date-fns';
 import { useNavigate } from 'react-router-dom';
-import { BadgeCheck, ChevronRight } from 'lucide-react';
+import { ChevronRight } from 'lucide-react';
 
 import { IShelterListItemProps, IShelterAvailabilityProps } from './types';
 import { cn, getAvailabilityProps, getSupplyPriorityProps } from '@/lib/utils';
 import { Separator } from '../ui/separator';
 import { Chip } from '../Chip';
 import { Button } from '../ui/button';
 import { SupplyPriority } from '@/service/supply/types';
+import { VerifiedBadge } from '@/components/VerifiedBadge/VerifiedBadge.tsx';
 
 const ShelterListItem = (props: IShelterListItemProps) => {
   const { data } = props;
@@ -39,15 +40,15 @@ const ShelterListItem = (props: IShelterListItemProps) => {
         <ChevronRight className="h-5 w-5" />
       </Button>
       <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"
+          className="font-semibold text-lg  hover:cursor-pointer hover:text-slate-500"
           onClick={() => navigate(`/abrigo/${data.id}`)}
         >
           {data.name}
         </h3>
+        {data.verified && (
+          <VerifiedBadge />
+        )}
       </div>
       <h6 className={cn('font-semibold text-md', availabilityClassName)}>
         {availability}

src/components/VerifiedBadge/VerifiedBadge.tsx

@@ -0,0 +1,12 @@
+import { BadgeCheck } from 'lucide-react';
+import WithTooltip from '@/components/ui/with-tooltip.tsx';
+
+const VerifiedBadge = () => {
+  return (
+    <WithTooltip content="Abrigo verificado">
+      <BadgeCheck className="h-5 w-5 stroke-white" fill="#1D61C8" />
+    </WithTooltip>
+  )
+}
+
+export { VerifiedBadge };

src/components/ui/with-tooltip.tsx

@@ -0,0 +1,28 @@
+import * as Tooltip from '@radix-ui/react-tooltip';
+import { useState, ReactNode } from 'react';
+
+interface WithTooltipProps {
+  children: ReactNode;
+  content: string;
+}
+
+const WithTooltip = ({ children, content }: WithTooltipProps) => {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <Tooltip.Provider>
+      <Tooltip.Root open={open} onOpenChange={setOpen}>
+        <Tooltip.Trigger asChild onClick={() => setOpen(!open)}>
+          {children}
+        </Tooltip.Trigger>
+        <Tooltip.Portal>
+          <Tooltip.Content className="text-white bg-gray-950 data-[state=delayed-open]:data-[side=top]:animate-slideDownAndFade data-[state=delayed-open]:data-[side=right]:animate-slideLeftAndFade data-[state=delayed-open]:data-[side=left]:animate-slideRightAndFade data-[state=delayed-open]:data-[side=bottom]:animate-slideUpAndFade text-violet11 select-none rounded-[4px] px-[15px] py-[10px] text-[12px] leading-none shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] will-change-[transform,opacity]">
+            {content}
+          </Tooltip.Content>
+        </Tooltip.Portal>
+      </Tooltip.Root>
+    </Tooltip.Provider>
+  );
+};
+
+export default WithTooltip;

src/pages/Shelter/Shelter.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { BadgeCheck, ChevronLeft, Pencil } from 'lucide-react';
+import { ChevronLeft, Pencil } from 'lucide-react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import { CardAboutShelter, Header, LoadingScreen } from '@/components';
@@ -10,6 +10,7 @@ import { Button } from '@/components/ui/button';
 import { ShelterCategoryItems } from './components';
 import { IShelterCategoryItemsProps } from './components/ShelterCategoryItems/types';
 import { SupplyPriority } from '@/service/supply/types';
+import { VerifiedBadge } from '@/components/VerifiedBadge/VerifiedBadge.tsx';
 
 const Shelter = () => {
   const params = useParams();
@@ -54,12 +55,12 @@ const Shelter = () => {
       />
       <div className="p-4 flex flex-col max-w-5xl w-full">
         <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>
+          {shelter.verified && (
+            <VerifiedBadge />
+          )}
         </div>
         <div className="flex flex-1 items-center justify-between">
           <h1 className={cn(availabilityClassName, 'font-semibold')}>

tailwind.config.js

@@ -64,6 +64,22 @@ module.exports = {
         sm: 'calc(var(--radius) - 4px)',
       },
       keyframes: {
+        slideDownAndFade: {
+          from: { opacity: '0', transform: 'translateY(-2px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideLeftAndFade: {
+          from: { opacity: '0', transform: 'translateX(2px)' },
+          to: { opacity: '1', transform: 'translateX(0)' },
+        },
+        slideUpAndFade: {
+          from: { opacity: '0', transform: 'translateY(2px)' },
+          to: { opacity: '1', transform: 'translateY(0)' },
+        },
+        slideRightAndFade: {
+          from: { opacity: '0', transform: 'translateX(-2px)' },
+          to: { opacity: '1', transform: 'translateX(0)' },
+        },
         'accordion-down': {
           from: { height: '0' },
           to: { height: 'var(--radix-accordion-content-height)' },
@@ -76,6 +92,10 @@ module.exports = {
       animation: {
         'accordion-down': 'accordion-down 0.2s ease-out',
         'accordion-up': 'accordion-up 0.2s ease-out',
+        slideDownAndFade: 'slideDownAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideLeftAndFade: 'slideLeftAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideUpAndFade: 'slideUpAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
+        slideRightAndFade: 'slideRightAndFade 400ms cubic-bezier(0.16, 1, 0.3, 1)',
       },
     },
   },