style: optimizations

src/components/allTools/AllTools.tsx

@@ -1,10 +1,12 @@
 import { Box, Grid, Stack, Typography } from '@mui/material';
 import ToolCard from './ToolCard';
+import { IconifyIcon } from '@iconify/react';
 
 export interface ToolCardProps {
   title: string;
   description: string;
   link: string;
+  icon: IconifyIcon | string;
 }
 
 interface AllToolsProps {
@@ -26,6 +28,7 @@ export default function AllTools({ title, toolCards }: AllToolsProps) {
                 title={card.title}
                 description={card.description}
                 link={card.link}
+                icon={card.icon}
               />
             </Grid>
           ))}

src/components/allTools/ToolCard.tsx

@@ -1,9 +1,15 @@
-import { Box, Card, CardContent, Link, Typography } from '@mui/material';
+import { Box, Card, CardContent, Link, Stack, Typography } from '@mui/material';
 import { ToolCardProps } from './AllTools';
 import ChevronRightIcon from '@mui/icons-material/ChevronRight';
 import { useNavigate } from 'react-router-dom';
+import { Icon } from '@iconify/react';
 
-export default function ToolCard({ title, description, link }: ToolCardProps) {
+export default function ToolCard({
+  title,
+  description,
+  link,
+  icon
+}: ToolCardProps) {
   const navigate = useNavigate();
   return (
     <Card
@@ -28,9 +34,12 @@ export default function ToolCard({ title, description, link }: ToolCardProps) {
             borderColor: '#ffffff70'
           }}
         >
-          <Typography variant="h5" component="h2">
-            {title}
-          </Typography>
+          <Stack direction={'row'} spacing={2} alignItems={'center'}>
+            <Icon icon={icon} fontSize={25} />
+            <Typography variant="h5" component="h2">
+              {title}
+            </Typography>
+          </Stack>
           <Link href={link} underline="none" sx={{ color: '#fff' }}>
             <ChevronRightIcon />
           </Link>