From dccfe1643523f9f9eb582ae47d7682b8673076d9 Mon Sep 17 00:00:00 2001
From: "Ibrahima G. Coulibaly" <ibracool99@gmail.com>
Date: Wed, 26 Jun 2024 00:47:21 +0100
Subject: [PATCH] feat: make tool responsive

---
 .idea/workspace.xml                         | 34 +++++++--------
 src/components/ToolBreadcrumb.tsx           |  2 +-
 src/components/ToolHeader.tsx               | 46 ++++++++++++++-------
 src/components/ToolInputAndResult.tsx       |  4 +-
 src/components/allTools/AllTools.tsx        |  2 +-
 src/components/options/ToolOptionGroups.tsx |  9 ++--
 6 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 06c4b40..585f0c8 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,13 +4,13 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="fix: merging branches">
+    <list default="true" id="b30e2810-c4c1-4aad-b134-794e52cc1c7d" name="Changes" comment="feat: make responsive">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Hero.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Hero.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/Navbar/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/Navbar/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/home/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/home/index.tsx" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/number/generate/meta.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/number/generate/meta.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/pages/tools-by-category/index.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolBreadcrumb.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolBreadcrumb.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolHeader.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolHeader.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/ToolInputAndResult.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/allTools/AllTools.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/allTools/AllTools.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/options/ToolOptionGroups.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -198,14 +198,6 @@
       <workItem from="1719339559458" duration="303000" />
       <workItem from="1719340295244" duration="772000" />
     </task>
-    <task id="LOCAL-00012" summary="feat: text split">
-      <option name="closed" value="true" />
-      <created>1719003559965</created>
-      <option name="number" value="00012" />
-      <option name="presentableId" value="LOCAL-00012" />
-      <option name="project" value="LOCAL" />
-      <updated>1719003559965</updated>
-    </task>
     <task id="LOCAL-00013" summary="fix: text split try catch">
       <option name="closed" value="true" />
       <created>1719005757859</created>
@@ -590,7 +582,15 @@
       <option name="project" value="LOCAL" />
       <updated>1719350066784</updated>
     </task>
-    <option name="localTasksCounter" value="61" />
+    <task id="LOCAL-00061" summary="feat: make responsive">
+      <option name="closed" value="true" />
+      <created>1719358195260</created>
+      <option name="number" value="00061" />
+      <option name="presentableId" value="LOCAL-00061" />
+      <option name="project" value="LOCAL" />
+      <updated>1719358195260</updated>
+    </task>
+    <option name="localTasksCounter" value="62" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -611,7 +611,6 @@
     <option name="CHECK_CODE_SMELLS_BEFORE_PROJECT_COMMIT" value="false" />
     <option name="CHECK_NEW_TODO" value="false" />
     <option name="ADD_EXTERNAL_FILES_SILENTLY" value="true" />
-    <MESSAGE value="test: join service" />
     <MESSAGE value="feat: result copy and download" />
     <MESSAGE value="feat: contributors graph" />
     <MESSAGE value="feat: create tool script" />
@@ -636,7 +635,8 @@
     <MESSAGE value="fix: ToolFileInput.tsx" />
     <MESSAGE value="fix: generate numbers" />
     <MESSAGE value="fix: merging branches" />
-    <option name="LAST_COMMIT_MESSAGE" value="fix: merging branches" />
+    <MESSAGE value="feat: make responsive" />
+    <option name="LAST_COMMIT_MESSAGE" value="feat: make responsive" />
   </component>
   <component name="XSLT-Support.FileAssociations.UIState">
     <expand />
diff --git a/src/components/ToolBreadcrumb.tsx b/src/components/ToolBreadcrumb.tsx
index dabbed3..9720ece 100644
--- a/src/components/ToolBreadcrumb.tsx
+++ b/src/components/ToolBreadcrumb.tsx
@@ -14,7 +14,7 @@ interface BreadcrumbComponentProps {
 const ToolBreadcrumb: React.FC<BreadcrumbComponentProps> = ({ items }) => {
   const theme = useTheme();
   return (
-    <Breadcrumbs aria-label="breadcrumb">
+    <Breadcrumbs>
       {items.map((item, index) => {
         if (index === items.length - 1 || !item.link) {
           return (
diff --git a/src/components/ToolHeader.tsx b/src/components/ToolHeader.tsx
index 86faa74..eebb1d9 100644
--- a/src/components/ToolHeader.tsx
+++ b/src/components/ToolHeader.tsx
@@ -2,6 +2,7 @@ import { Button, Box, Stack } from '@mui/material';
 import Typography from '@mui/material/Typography';
 import ToolBreadcrumb from './ToolBreadcrumb';
 import { capitalizeFirstLetter } from '../utils/string';
+import Grid from '@mui/material/Grid';
 
 interface ToolHeaderProps {
   title: string;
@@ -12,17 +13,23 @@ interface ToolHeaderProps {
 
 function ToolLinks() {
   return (
-    <Box display="flex" gap={2} my={2}>
-      <Button variant="outlined" href="#tool">
-        Use This Tool
-      </Button>
-      <Button variant="outlined" href="#examples">
-        See Examples
-      </Button>
-      <Button variant="outlined" href="#tour">
-        Learn How to Use
-      </Button>
-    </Box>
+    <Grid container spacing={2} mt={1}>
+      <Grid item md={12} lg={4}>
+        <Button fullWidth variant="outlined" href="#tool">
+          Use This Tool
+        </Button>
+      </Grid>
+      <Grid item md={12} lg={4}>
+        <Button fullWidth variant="outlined" href="#examples">
+          See Examples
+        </Button>
+      </Grid>
+      <Grid item md={12} lg={4}>
+        <Button fullWidth variant="outlined" href="#tour">
+          Learn How to Use
+        </Button>
+      </Grid>
+    </Grid>
   );
 }
 
@@ -44,16 +51,23 @@ export default function ToolHeader({
           { title }
         ]}
       />
-      <Stack direction={'row'} alignItems={'center'} spacing={2}>
-        <Box>
+      <Grid mt={1} container spacing={2}>
+        <Grid item xs={12} md={8}>
           <Typography mb={2} fontSize={30} color={'primary'}>
             {title}
           </Typography>
           <Typography fontSize={20}>{description}</Typography>
           <ToolLinks />
-        </Box>
-        {image && <img width={'250'} src={image} />}
-      </Stack>
+        </Grid>
+
+        {image && (
+          <Grid item xs={12} md={4}>
+            <Box sx={{ display: 'flex', justifyContent: 'center' }}>
+              <img width={'250'} src={image} />
+            </Box>
+          </Grid>
+        )}
+      </Grid>
     </Box>
   );
 }
diff --git a/src/components/ToolInputAndResult.tsx b/src/components/ToolInputAndResult.tsx
index 3aefb8c..f71ac85 100644
--- a/src/components/ToolInputAndResult.tsx
+++ b/src/components/ToolInputAndResult.tsx
@@ -10,10 +10,10 @@ export default function ToolInputAndResult({
 }) {
   return (
     <Grid id="tool" container spacing={2}>
-      <Grid item xs={6}>
+      <Grid item xs={12} md={6}>
         {input}
       </Grid>
-      <Grid item xs={6}>
+      <Grid item xs={12} md={6}>
         {result}
       </Grid>
     </Grid>
diff --git a/src/components/allTools/AllTools.tsx b/src/components/allTools/AllTools.tsx
index e0a5e1f..b3c701f 100644
--- a/src/components/allTools/AllTools.tsx
+++ b/src/components/allTools/AllTools.tsx
@@ -21,7 +21,7 @@ export default function AllTools({ title, toolCards }: AllToolsProps) {
       <Stack direction={'row'} alignItems={'center'} spacing={2}>
         <Grid container spacing={2}>
           {toolCards.map((card, index) => (
-            <Grid item xs={4} key={index}>
+            <Grid item xs={12} md={6} lg={4} key={index}>
               <ToolCard
                 title={card.title}
                 description={card.description}
diff --git a/src/components/options/ToolOptionGroups.tsx b/src/components/options/ToolOptionGroups.tsx
index 76c48f9..465adc4 100644
--- a/src/components/options/ToolOptionGroups.tsx
+++ b/src/components/options/ToolOptionGroups.tsx
@@ -1,6 +1,7 @@
 import Typography from '@mui/material/Typography';
 import React, { ReactNode } from 'react';
 import { Box, Stack } from '@mui/material';
+import Grid from '@mui/material/Grid';
 
 interface ToolOptionGroup {
   title: string;
@@ -13,15 +14,15 @@ export default function ToolOptionGroups({
   groups: ToolOptionGroup[];
 }) {
   return (
-    <Stack direction={'row'} spacing={2}>
+    <Grid container spacing={2}>
       {groups.map((group) => (
-        <Box key={group.title}>
+        <Grid item xs={12} md={6} key={group.title}>
           <Typography mb={1} fontSize={22}>
             {group.title}
           </Typography>
           {group.component}
-        </Box>
+        </Grid>
       ))}
-    </Stack>
+    </Grid>
   );
 }