marcel/omni-tools
1
0
Fork 0
mirror of https://github.com/iib0011/omni-tools.git synced 2025-09-20 06:29:32 +02:00
Code Issues Packages Projects Releases Wiki Activity

feat: make tool responsive

Browse Source
This commit is contained in:
Ibrahima G. Coulibaly
2024-06-26 00:47:21 +01:00
parent 21c6b8bc1f
commit dccfe16435
6 changed files with 56 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/ToolHeader.tsx
View File

@@ -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>
);
}