Refact: Adds new icons to missao, visao e valores

Author: RodrigoEC

public/sprite.svg

@@ -42,16 +42,16 @@ export default async function QuemSomos() {
         </h2>
 
         <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
-          <InfoCard emoji="🔭" title="Visão" color={getRandomBrandColor(colors)}>
+          <InfoCard icon="eye" title="Visão" color={getRandomBrandColor(colors)}>
             {documentToReactComponents(vision.json)}
           </InfoCard>
 
-          <InfoCard emoji="🚀" title="Missão" color={getRandomBrandColor(colors)}>
+          <InfoCard icon="target" title="Missão" color={getRandomBrandColor(colors)}>
             {documentToReactComponents(mission.json)}
           </InfoCard>
         </div>
 
-        <InfoCard emoji="⭐" title="Valores" color={getRandomBrandColor(colors)}>
+        <InfoCard icon="star" title="Valores" color={getRandomBrandColor(colors)}>
           <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
             {values.map((value) => (
               <div

src/app/quem-somos/page.tsx

@@ -15,13 +15,15 @@ export const Icon = ({
   "aria-label"?: string;
   onClick?: React.MouseEventHandler<SVGSVGElement>;
   className?: string;
+  style?: React.CSSProperties;
 }) => {
   return (
     <svg
       {...props}
       onClick={onClick}
       width={size ?? width}
       height={size ?? height}
+      fill="currentColor"
     >
       <use href={`/sprite.svg#${id}`} />
     </svg>

src/components/Icon.tsx

@@ -1,23 +1,24 @@
 import { ReactNode } from "react";
+import { Icon } from "./Icon";
 
 interface InfoCardProps {
-  emoji: string;
+  icon: string;
   title: string;
   color: string;
   children: ReactNode;
 }
 
-export const InfoCard = ({ emoji, title, color, children }: InfoCardProps) => {
+export const InfoCard = ({ icon, title, color, children }: InfoCardProps) => {
   return (
     <div
       className="rounded-xl border-t-4 p-6 bg-white flex flex-col gap-4"
       style={{ borderTopColor: color }}
     >
       <div className="flex items-center gap-3">
-        <span className="text-3xl">{emoji}</span>
+        <Icon id={icon} size={28} style={{ color }} />
         <h2 className="text-lg font-bold text-gray-900">{title}</h2>
       </div>
       <div className="text-gray-700 text-sm">{children}</div>
     </div>
   );
-};
+};