scroll in ServiceList

This commit is contained in:
2025-10-11 22:19:18 +05:30
parent 2cdee4a028
commit d27b793cd4

View File

@@ -1,4 +1,5 @@
import React from 'react'; import React from 'react';
import Box from '@mui/material/Box';
import {Grid, Paper, Link, Typography} from '@mui/material'; import {Grid, Paper, Link, Typography} from '@mui/material';
interface ServiceList { interface ServiceList {
@@ -14,27 +15,34 @@ interface ServiceListProps {
const ServiceList: React.FC<ServiceListProps> = ({serviceList}) => { const ServiceList: React.FC<ServiceListProps> = ({serviceList}) => {
return ( return (
<Grid container spacing={3} justifyContent="center"> <Box
{serviceList.map((s) => ( sx={{
<Paper flex: 1,
elevation={3} overflowY: 'auto', // ✅ Scroll only inside this
sx={{p: 2, textAlign: "center", bgcolor: "#2d2d2d", borderRadius: 2}} }}
> >
<Link <Grid container spacing={3} justifyContent="center">
href={s.url} {serviceList.map((s) => (
target={s.external ? "_blank" : undefined} <Paper
rel="noopener" elevation={3}
underline="none" sx={{p: 2, textAlign: "center", bgcolor: "#2d2d2d", borderRadius: 2}}
sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
> >
{s.name} <Link
</Link> href={s.url}
<Typography variant="body2" sx={{mt: 1, color: "#ccc"}}> target={s.external ? "_blank" : undefined}
{s.desc} rel="noopener"
</Typography> underline="none"
</Paper> sx={{fontSize: 18, fontWeight: "bold", color: "success.main"}}
))} >
</Grid> {s.name}
</Link>
<Typography variant="body2" sx={{mt: 1, color: "#ccc"}}>
{s.desc}
</Typography>
</Paper>
))}
</Grid>
</Box>
); );
}; };