fix/ add lucide icons to replace emojis so it works across all browsers

Author: dadedeandrade

src/pages/AboutUs/AboutUs.tsx

@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { HandHeart, Home, Loader, Users } from 'lucide-react';
+import { HandHeart, Home, LifeBuoy, Loader, Users } from 'lucide-react';
 
 import { BurgerMenu, Header } from '@/components';
 import { AboutCardInfo, ServicedFrontInfo } from './components';
@@ -43,8 +43,12 @@ const AboutUs = () => {
         </h3>
         <p className="text-justify text-md md:text-lg font-medium [&>a]:text-blue-500 [&>a]:hover:text-blue-600 [&>a]:active:text-blue-700">
           Iniciado no domingo (04/05) e concluído na segunda (05/05), após 18
-          horas seguidas de desenvolvimento, nosso webapp <b>SOS RS 🛟</b>,
-          idealizado e desenvolvido por{' '}
+          horas seguidas de desenvolvimento, nosso webapp <b>SOS RS </b>
+          <LifeBuoy
+            className="align-middle inline-block relative max-h-6 padding pb-0.5"
+            size={18}
+          />
+          , idealizado e desenvolvido por{' '}
           <a
             className="hover:underline"
             href="https://www.linkedin.com/in/klaus-riffel-69441928/"
@@ -124,10 +128,14 @@ const AboutUs = () => {
             className="w-full"
           />
         </div>
-        <p className="text-justify font-medium text-md md:text-lg">
-          Atualmente, o <b>SOS RS 🛟</b> apoia a gestão das demandas e
-          necessidades dos abrigos do Rio Grande do Sul com informações
-          públicas, atualizadas, confiáveis e auditáveis.
+        <p className="text-justify font-medium text-md md:text-lg leading-10">
+          Atualmente, o <b>SOS RS </b>
+          <LifeBuoy
+            className="align-middle inline-block relative max-h-6 padding pb-0.5"
+            size={18}
+          />{' '}
+          apoia a gestão das demandas e necessidades dos abrigos do Rio Grande
+          do Sul com informações públicas, atualizadas, confiáveis e auditáveis.
         </p>
         <h3 className="text-2xl font-medium text-muted-foreground mt-4">
           Frentes atendidas

src/pages/AboutUs/frontItems.ts renamed to src/pages/AboutUs/frontItems.tsx

@@ -1,68 +1,79 @@
 import { IServicedFrontInfoProps } from './components/ServicedFrontInfo/types';
+import {
+  Car,
+  Baby,
+  MapPinned,
+  CookingPot,
+  GlassWater,
+  Goal,
+  HeartHandshake,
+  Infinity,
+  MonitorSmartphone,
+  Speech,
+  Users,
+} from 'lucide-react';
 
-const frontItems: IServicedFrontInfoProps[] = [
+export const frontItems: IServicedFrontInfoProps[] = [
   {
-    icon: '🚰',
+    icon: <GlassWater size={24} color="black" />,
     title: 'Água',
     description: 'Atender demandas urgentes de água;',
   },
   {
-    icon: '🥘',
+    icon: <CookingPot size={24} color="black" />,
     title: 'Cozinhas solidárias',
     description:
       'Auxiliar na operação das cozinhas com o envio de suprimentos e distribuição das marmitas;',
   },
   {
-    icon: '🏠',
+    icon: <Infinity size={24} color="black" />,
     title: 'Conexões',
     description:
       'Gerir dados confiáveis sobre a demanda de abrigos e a disponibilidade de doações;',
   },
   {
-    icon: '️❤️',
+    icon: <HeartHandshake size={24} color="black" />,
     title: 'Comunidades',
     description: 'Mapear e integrar lideranças comunitárias;',
   },
   {
-    icon: '📣',
+    icon: <Speech size={24} color="black" />,
     title: 'Comunicação',
     description:
       'Manter as informações sobre a iniciativa atualizadas e disponíveis a todos;',
   },
   {
-    icon: '📍',
+    icon: <MapPinned size={24} color="black" />,
     title: 'Dados e Geolocalização',
     description:
       'Fornecer dados públicos sobre as enchentes e as demandas do cenário de crise com o apoio do IPH UFRGS e nossas operações de voluntários;',
   },
   {
-    icon: '🎯',
+    icon: <Goal size={24} color="black" />,
     title: 'Expansão',
     description: 'Estruturar o crescimento da operação e parcerias;',
   },
   {
-    icon: '️🚗',
+    icon: <Car size={24} color="black" />,
     title: 'Logística',
     description:
       'Conectar o transporte dos centros de distribuição e triagem aos abrigos;',
   },
   {
-    icon: '🧒🏽',
+    icon: <Baby size={24} color="black" />,
     title: 'Olhar para a criança',
     description: 'Proteger e oferecer apoio às crianças em abrigos;',
   },
   {
-    icon: '️🧑🏽‍🤝‍🧑🏽',
+    icon: <Users size={24} color="black" />,
     title: 'Pessoas',
     description:
       'Recrutar, acolher, orientar, treinar e direcionar novos voluntários e padrinhos/madrinhas;',
   },
   {
-    icon: '🖥️',
+    icon: <MonitorSmartphone size={24} color="black" />,
     title: 'Tecnologia',
     description:
       'Desenvolver uma solução digital a partir de dados públicos confiáveis.',
   },
 ];
-
-export { frontItems };

src/pages/Home/components/Filter/types.ts

@@ -28,6 +28,6 @@ export interface IFilterFormikProps {
 export interface IFilterProps {
   onSubmit: (values: IFilterFormProps) => void;
   data: IFilterFormProps;
-  open: true;
+  open: boolean;
   onClose: () => void;
 }