Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 | import { Grid, Stack, styled } from "@mui/material";
import { Text, TruncateText } from "@common/Text";
import { palette } from "@palette";
import ReportActionButtons from "@components/CampaignReport/ReportActionButtons";
import { useNavigate } from "react-router";
import { Stat } from "@common/NewStats";
import placeholder from "assets/images/Placeholder.png";
import { ReportBannerProps } from "./types";
const MobileReportBanner = ({
imgSrc,
type,
stats,
createdAt,
previewLink,
handleEdit,
secondaryActionButton,
title,
}: ReportBannerProps) => {
const navigate = useNavigate();
return (
<Stack direction="column" gap={2} marginBottom="20px">
<Stack direction="row" gap={1}>
<Image alt="logo" src={imgSrc ? `${imgSrc}/original` : placeholder} />
<Stack direction="column" gap={0.5} justifyContent="center">
<TruncateText
lineClamp={1}
fontSize={48}
variant="h6"
fontWeight="book"
lineHeight="normal"
color={palette.neutral[80]}
sx={{
padding: "8px",
width: "70vw",
}}
>
{title}
</TruncateText>
{/* <Text
variant="body"
fontWeight="book"
fontSize={14}
color={palette.neutral[70]}
>
{type}
</Text> */}
{createdAt && (
<Text
variant="body"
fontWeight="book"
fontSize={14}
color={palette.neutral[70]}
>
Created on <span style={spanStyle}>{createdAt}</span>
</Text>
)}
</Stack>
</Stack>
<Grid
container
rowSpacing={2}
columnSpacing={3}
sx={{
borderRadius: "8px",
background: palette.neutral.white,
paddingBottom: "16px",
margin: 0,
maxWidth: "100%",
}}
>
{stats?.map(({ isAmount, title, value, percent }, index) => (
<Grid item xs={6} key={index}>
<Stat
isAmount={isAmount}
title={title}
value={value}
percent={percent}
valueProps={{
fontSize: 18,
lineHeight: "22px",
color: palette.black[100],
}}
/>
</Grid>
))}
</Grid>
<ReportActionButtons
secondaryButton={secondaryActionButton}
onSecondaryClick={previewLink ? () => navigate(previewLink) : undefined}
onPrimaryClick={handleEdit}
/>
</Stack>
);
};
const spanStyle = {
color: palette.neutral[80],
fontWeight: 300,
};
const Image = styled("img")({
borderRadius: "5.2px",
height: 82,
width: 82,
display: "block",
maxWidth: "100%",
maxHeight: "100%",
});
export default MobileReportBanner;
|