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