57 lines
2.3 KiB
TypeScript
57 lines
2.3 KiB
TypeScript
import Card from '@mui/material/Card';
|
|
import CardContent from '@mui/material/CardContent';
|
|
import CardMedia from '@mui/material/CardMedia';
|
|
|
|
import Typography from '@mui/material/Typography';
|
|
import Box from '@mui/material/Box';
|
|
import { styled } from '@mui/material/styles';
|
|
import {sidecardData} from '../data.tsx';
|
|
import { useParams, Link } from 'react-router-dom';
|
|
import BackgroundVideo from "./components/BackgroundVideo";
|
|
|
|
const StyledTypography = styled(Typography)(({ theme }) => ({
|
|
color: theme.palette.text.secondary,
|
|
textAlign: 'justify',
|
|
marginBottom: '1em',
|
|
}));
|
|
|
|
|
|
function ProjectDetails() {
|
|
const { id } = useParams();
|
|
const projectDetails = sidecardData[Number(id)];
|
|
return (
|
|
<>
|
|
<div style={{display:"flex", flexDirection:"column", alignItems:"center", justifyContent:"center", minHeight:"100vh"}}>
|
|
<Card sx={{ display: 'flex', flexDirection: "column", alignItems: "center", backgroundColor:"#FFFFFFA8"}} >
|
|
<Box sx={{ display: 'flex', flexDirection: 'row', alignSelf: 'flex-start', gap: '0.5em', m: '1em' }}>
|
|
<Link to="/" style={{ textDecoration: 'none' }}><Typography sx={{color:"#659adf"}}>Main</Typography></Link> > {projectDetails.title}
|
|
</Box>
|
|
<Typography gutterBottom variant="h5" >
|
|
{projectDetails.title}
|
|
</Typography>
|
|
<CardMedia
|
|
component="img"
|
|
alt={projectDetails.title}
|
|
image={projectDetails.img}
|
|
sx={{ width:"auto", maxHeight:"45vh", rounded: '8px' }}
|
|
/>
|
|
<Box>
|
|
<CardContent>
|
|
<Box sx={{ display: 'flex', flexDirection: { xs: 'column', sm: 'row' }, gap: {xs:0, sm:'2em'}}}>
|
|
{projectDetails.description.map((item, ind) => (
|
|
<StyledTypography key={ind} variant="body2" sx={{ flex: 1 }}>
|
|
{item}
|
|
</StyledTypography>
|
|
))}
|
|
</Box>
|
|
</CardContent>
|
|
|
|
</Box>
|
|
</Card>
|
|
<BackgroundVideo />
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ProjectDetails; |