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 | 4x 14x 14x 14x 14x | import { Text } from "@common/Text";
import { Box, Stack, styled } from "@mui/material";
import { palette } from "@palette";
const LatestAdded = () => (
<Wrapper>
<Overlay />
<CustomText>Latest added</CustomText>
</Wrapper>
);
const Overlay = styled(Box)(() => ({
background:
"radial-gradient(50% 50% at 50% 50%, rgba(109, 156, 248, 0.50) 0%, rgba(109, 156, 248, 0.00) 100%)",
height: "164px",
top: "-112px",
right: 0,
left: 0,
position: "absolute",
}));
const CustomText = styled(Text)(() => ({
color: palette.neutral.white,
lineHeight: "16.8px",
backgroundColor: "#6D9CF8",
borderRadius: "100px",
padding: "6px 24px",
zIndex: 5,
userSelect: "none",
}));
const Wrapper = styled(Stack)(() => ({
flexDirection: "row",
width: "100%",
alignItems: "center",
justifyContent: "center",
paddingTop: "16px",
paddingBottom: "8px",
position: "relative",
overflow: "hidden",
minHeight: "54px",
}));
export default LatestAdded;
|