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 | 23x 713x 713x 23x 6033x 713x 713x | import { Box, BoxProps, Stack } from "@mui/material";
import { PlusIcon } from "@phosphor-icons/react";
import GiveText from "@shared/Text/GiveText";
import { styled } from "@theme/v2/Provider";
export type PlaceholderCardProps = {
icon: JSX.Element;
title: string;
description: string;
disabled?: boolean;
} & BoxProps;
export const PlaceholderCard = ({
icon,
title,
description,
disabled,
...props
}: PlaceholderCardProps) => {
return (
<PlaceholderCardSubContainer {...props} disabled={disabled}>
<Stack direction="row" gap="20px" alignItems="flex-start">
<IconContainer>{icon}</IconContainer>
<Stack spacing="4px" maxWidth="440px">
<GiveText variant="bodyM" color="primary">
{title}
</GiveText>
<GiveText variant="bodyS" color="secondary">
{description}
</GiveText>
</Stack>
</Stack>
<Box width="32px">
<StyledAddButton type="button">
<Stack justifyContent="center">
<PlusIcon color="primary" size={16} />
</Stack>
</StyledAddButton>
</Box>
</PlaceholderCardSubContainer>
);
};
const IconContainer = styled(Box)(() => ({
width: 24,
height: 24,
display: "flex",
alignItems: "center",
justifyContent: "center",
}));
const PlaceholderCardSubContainer = styled(Box, {
shouldForwardProp: (prop) =>
![
"warning",
"disabled",
"noController",
"legalEntityID",
"isIndividualSoleProprietorship",
"totalOwnerships",
"parentCategories",
].includes(prop),
})<BoxProps & { disabled?: boolean }>(({ theme, disabled }) => ({
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
gap: "20px",
padding: "16px",
borderRadius: "12px",
background: theme.palette?.primitive?.transparent?.["darken-5"],
cursor: "pointer",
...(disabled && {
pointerEvents: "none",
opacity: 0.5,
}),
"&:hover": {
background: theme.palette?.primitive?.transparent?.["darken-10"],
},
}));
const StyledAddButton = styled("button")(({ theme }) => ({
boxShadow: "none",
border: "none",
background: theme.palette?.primitive?.transparent?.["darken-10"],
width: "32px",
height: "32px",
borderRadius: "50%",
display: "flex",
alignItems: "center",
justifyContent: "center",
cursor: "pointer",
}));
|