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 | 63x 10x 58x | import { Grid, Stack } from "@mui/material";
import GiveText from "@shared/Text/GiveText";
import { capitalizeFirstLetter } from "@utils/index";
import PublicInputShare from "./PublicInputShare";
import type { TButtonsMap } from "./PublicShare.types";
/**
* Share modal body — frames 7397-80460 & 7397-80680: "URL" label (Body S) over
* the read-only field, then 24px below it the share channels in two columns —
* 40px circular icons, a 12px icon-to-label gap (Body XS, secondary) and a
* 20px gutter both ways.
*/
const StylessVariant = ({
ButtonsMap,
url,
}: {
ButtonsMap: TButtonsMap;
url: string;
}) => {
return (
<Stack gap="24px">
<Stack gap={1}>
<PublicInputShare
url={url}
label="URL"
textProps={{ fontSize: "14px", lineHeight: "20px" }}
/>
</Stack>
<Grid container rowSpacing="20px" columnSpacing="20px">
{ButtonsMap.map((Button, index) => (
<Grid item key={index} xs={6} sm={6} md={6}>
<Stack
sx={{
cursor: "pointer",
height: "40px",
// The icon components default to the 48px Launch-step size.
"& svg": { display: "block", width: "40px", height: "40px" },
}}
flexDirection="row"
alignItems="center"
gap="12px"
>
<Button.Component
id={`${Button.id}-share-button`}
url={url}
appId=""
>
<Button.Icon />
</Button.Component>
<GiveText variant="bodyXS" color="secondary">
{Button.label ?? capitalizeFirstLetter(Button.id)}
</GiveText>
</Stack>
</Grid>
))}
</Grid>
</Stack>
);
};
export default StylessVariant;
|