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 113 114 115 116 117 118 119 120 121 122 | 13x 13x 13x | import { Stack, StackProps, styled } from "@mui/material";
import { Text, TruncateText } from "@common/Text";
import { palette } from "@palette";
import placeholder from "assets/images/Placeholder.png";
import { StatProps } from "@common/NewStats/Stat";
import NewMobileStat from "../commons/NewMobileStat";
import { memo } from "react";
import FadeDownWrapper from "@components/animation/FadeDownWrapper";
export interface NewMobileProductListingBannerProps extends StackProps {
imgSrc?: string;
type: string;
createdAt?: string;
stats?: StatProps[];
previewLink?: string;
handleEdit?: (e: any) => void;
handleOpenMenu?: (e: any) => void;
secondaryActionButton?: React.ReactNode;
statsIsFetching?: boolean;
title?: string;
}
const NewMobileProductListingBanner = ({
imgSrc,
stats,
createdAt,
title,
previewLink,
...rest
}: NewMobileProductListingBannerProps) => {
return (
<FadeDownWrapper delay={100}>
<StyledStack {...rest} data-testid="background-image-container">
<Image alt="logo" src={imgSrc ? `${imgSrc}/original` : placeholder} />
<Stack mt="30px">
<TruncateText
lineClamp={1}
variant="h6"
fontWeight="medium"
textAlign="center"
color={palette.neutral[80]}
sx={{
margin: "8px 8px 33px",
}}
>
{title}
</TruncateText>
<Stack direction="column" gap={1}>
{stats?.map(
({ isAmount, title, value, percent, isTotal }, index) => (
<NewMobileStat
isAmount={isAmount}
isTotal={isTotal}
title={title}
value={value}
percent={percent}
key={index}
valueProps={{
fontSize: 18,
lineHeight: "22px",
color: palette.black[100],
}}
/>
),
)}
</Stack>
{createdAt && (
<Stack gap={0} mt="25px">
<Text
variant="body"
fontWeight="medium"
fontSize={12}
color={palette.neutral[70]}
textAlign="center"
lineHeight={1}
>
Created on
</Text>
<Text
fontWeight="medium"
fontSize={12}
color={palette.neutral[80]}
textAlign="center"
>
{createdAt}
</Text>
</Stack>
)}
</Stack>
</StyledStack>
</FadeDownWrapper>
);
};
const StyledStack = styled(Stack)(({ theme }) => ({
position: "relative",
marginTop: "70px",
gap: "2px",
borderRadius: "12px",
padding: "16px",
boxShadow: "0px 10px 20px 0px #0000000D",
backgroundColor: theme.palette.common.white,
cursor: "pointer",
}));
const Image = styled("img")({
borderRadius: "5.2px",
display: "block",
maxWidth: "100%",
maxHeight: "100%",
position: "absolute",
top: "-65px",
left: "50%",
transform: "translateX(-50%)",
width: "200px",
height: "104px",
objectFit: "cover",
boxShadow: "0px 4px 20px 0px #00000040",
});
export default memo(NewMobileProductListingBanner);
|