60 lines
1.1 KiB
React
60 lines
1.1 KiB
React
import React from 'react';
|
|
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardMedia,
|
|
CardActionArea,
|
|
Typography,
|
|
} from '@mui/material';
|
|
import { useTheme } from '@mui/material/styles';
|
|
|
|
import { Tilt } from './Tilt';
|
|
|
|
const MainCard = ({ imageURL, title, description, url }) => {
|
|
const theme = useTheme();
|
|
|
|
const options = {
|
|
reverse: true,
|
|
speed: 1200,
|
|
easing: 'cubic-bezier(.09,.67,.54,.76)',
|
|
};
|
|
|
|
return (
|
|
<Tilt
|
|
// style={{ padding: 0, margin: 0 }}
|
|
options={options}
|
|
children={
|
|
<Card
|
|
sx={{
|
|
maxWidth: '320px',
|
|
mx: 'auto',
|
|
color: theme.palette.text.secondary,
|
|
backgroundColor: theme.palette.background.paper,
|
|
}}>
|
|
<CardMedia
|
|
component='img'
|
|
height='150'
|
|
image={imageURL}
|
|
alt={title}
|
|
/>
|
|
|
|
<Typography variant='body2'>{description}</Typography>
|
|
|
|
<CardActionArea>
|
|
<CardContent
|
|
color='white'
|
|
onClick={() => window.open(url, '_blank')}>
|
|
<Typography gutterBottom variant='h6' component='div'>
|
|
{title}
|
|
</Typography>
|
|
</CardContent>
|
|
</CardActionArea>
|
|
</Card>
|
|
}
|
|
/>
|
|
);
|
|
};
|
|
|
|
export default MainCard;
|