fix: show Use this tool only if medium breakpoint

This commit is contained in:
Ibrahima G. Coulibaly
2025-07-15 15:56:21 +01:00
parent c90283b571
commit f8189fdc23

View File

@@ -10,6 +10,7 @@ import { useEffect, useState } from 'react';
import { isBookmarked, toggleBookmarked } from '@utils/bookmark';
import IconButton from '@mui/material/IconButton';
import { useTranslation } from 'react-i18next';
import useMediaQuery from '@mui/material/useMediaQuery';
const StyledButton = styled(Button)(({ theme }) => ({
backgroundColor: 'white',
@@ -30,6 +31,8 @@ interface ToolHeaderProps {
function ToolLinks() {
const { t } = useTranslation();
const [examplesVisible, setExamplesVisible] = useState(false);
const theme = useTheme();
const isMd = useMediaQuery(theme.breakpoints.down('md'));
useEffect(() => {
const timeout = setTimeout(() => {
@@ -50,6 +53,7 @@ function ToolLinks() {
}
return (
<Grid container spacing={2} mt={1}>
{isMd && (
<Grid item md={12} lg={6}>
<StyledButton
sx={{ backgroundColor: 'background.paper' }}
@@ -60,6 +64,7 @@ function ToolLinks() {
Use This Tool
</StyledButton>
</Grid>
)}
{examplesVisible && (
<Grid item md={12} lg={6}>
<StyledButton