105 lines
3.4 KiB
TypeScript
105 lines
3.4 KiB
TypeScript
|
import { Box, Typography, useTheme } from "@mui/material";
|
|||
|
|
import UnderlinedLink from "./UnderlinedLink";
|
|||
|
|
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";
|
|||
|
|
import Button from "./Button";
|
|||
|
|
|
|||
|
|
|
|||
|
|
interface Props {
|
|||
|
|
image: string;
|
|||
|
|
headerText: string;
|
|||
|
|
text: string;
|
|||
|
|
linkHref: string;
|
|||
|
|
isHighlighted?: boolean;
|
|||
|
|
height: string;
|
|||
|
|
width: string;
|
|||
|
|
buttonType: "link" | "button";
|
|||
|
|
shadowType: "dark" | "light";
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function CardWithLink({
|
|||
|
|
image,
|
|||
|
|
headerText,
|
|||
|
|
text,
|
|||
|
|
linkHref,
|
|||
|
|
isHighlighted = false,
|
|||
|
|
height,
|
|||
|
|
width,
|
|||
|
|
buttonType,
|
|||
|
|
shadowType
|
|||
|
|
}: Props) {
|
|||
|
|
const theme = useTheme();
|
|||
|
|
|
|||
|
|
const boxShadow: string = shadowType === "dark" ?
|
|||
|
|
`0px 100px 309px rgba(37, 39, 52, 0.24),
|
|||
|
|
0px 41.7776px 129.093px rgba(37, 39, 52, 0.172525),
|
|||
|
|
0px 22.3363px 69.0192px rgba(37, 39, 52, 0.143066),
|
|||
|
|
0px 12.5216px 38.6916px rgba(37, 39, 52, 0.12),
|
|||
|
|
0px 6.6501px 20.5488px rgba(37, 39, 52, 0.0969343),
|
|||
|
|
0px 2.76726px 8.55082px rgba(37, 39, 52, 0.0674749)`
|
|||
|
|
:
|
|||
|
|
`0px 100px 80px rgba(126, 42, 234, 0.07),
|
|||
|
|
0px 41.7776px 33.4221px rgba(126, 42, 234, 0.0503198),
|
|||
|
|
0px 22.3363px 17.869px rgba(126, 42, 234, 0.0417275),
|
|||
|
|
0px 12.5216px 10.0172px rgba(126, 42, 234, 0.035),
|
|||
|
|
0px 6.6501px 5.32008px rgba(126, 42, 234, 0.0282725),
|
|||
|
|
0px 2.76726px 2.21381px rgba(126, 42, 234, 0.0196802)`;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<Box
|
|||
|
|
sx={{
|
|||
|
|
display: "flex",
|
|||
|
|
flexDirection: "column",
|
|||
|
|
flexGrow: 1,
|
|||
|
|
alignItems: "start",
|
|||
|
|
p: "20px",
|
|||
|
|
maxWidth: "360px",
|
|||
|
|
width,
|
|||
|
|
height,
|
|||
|
|
backgroundColor: isHighlighted ? theme.palette.custom.brightPurple.main : theme.palette.custom.grey.main,
|
|||
|
|
borderRadius: "12px",
|
|||
|
|
color: "white",
|
|||
|
|
boxShadow,
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
<Box sx={{
|
|||
|
|
alignSelf: "center",
|
|||
|
|
backgroundImage: `url(${image})`,
|
|||
|
|
width: "100%",
|
|||
|
|
height: "100%",
|
|||
|
|
maxHeight: "196px",
|
|||
|
|
flexGrow: 1,
|
|||
|
|
backgroundSize: "contain",
|
|||
|
|
backgroundRepeat: "no-repeat",
|
|||
|
|
backgroundPosition: "center",
|
|||
|
|
}} />
|
|||
|
|
<Typography variant="h5" sx={{ my: "12px" }}>{headerText}</Typography>
|
|||
|
|
<Typography>{text}</Typography>
|
|||
|
|
{buttonType === "link" ?
|
|||
|
|
<UnderlinedLink
|
|||
|
|
linkHref={linkHref}
|
|||
|
|
text="Подробнее"
|
|||
|
|
endIcon={<ArrowForwardIcon sx={{ height: "20px", width: "20px" }} />}
|
|||
|
|
isHighlighted={isHighlighted}
|
|||
|
|
sx={{
|
|||
|
|
mt: "auto",
|
|||
|
|
mb: "15px",
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
:
|
|||
|
|
<Button
|
|||
|
|
variant="contained"
|
|||
|
|
sx={{
|
|||
|
|
backgroundColor: "white",
|
|||
|
|
color: theme.palette.primary.main,
|
|||
|
|
mt: "auto",
|
|||
|
|
"&:hover": {
|
|||
|
|
backgroundColor: "#dddddd",
|
|||
|
|
}
|
|||
|
|
}}
|
|||
|
|
>
|
|||
|
|
Подробнее
|
|||
|
|
</Button>
|
|||
|
|
}
|
|||
|
|
</Box >
|
|||
|
|
);
|
|||
|
|
}
|