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 >
|
||
);
|
||
} |