scroll in ServiceList
This commit is contained in:
@@ -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>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user