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 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 | 2x 2x 2x | import * as React from "react";
// @mui
import Box from "@mui/material/Box";
import Fade from "@mui/material/Fade";
import Stack from "@mui/material/Stack";
import { useTheme } from "@mui/material/styles";
import useMediaQuery from "@mui/material/useMediaQuery";
// components
import { Modal } from "@common/Modal";
import { IconButton } from "@common/IconButton";
import { Tabs, TabPanel, ButtonTab } from "@common/Tabs";
import AddToYourWebsite from "./AddToYourWebsite";
import CustomLink from "./CustomLink";
// assets
import {
CodeIcon,
FacebookIcon,
HomeIcon,
LinkedInIcon,
PinterestIcon,
ShareIcon,
TwitterIcon,
} from "@assets/icons";
import NiceModal, { muiDialogV5, useModal } from "@ebay/nice-modal-react";
import { ShareProps } from "./share.types";
//TODO: refactor needed to avoid ugly workarounds
const btnStyle = {
borderRadius: "110.769px",
boxShadow:
"5.71429px 5.71429px 11.4286px rgba(114, 142, 171, 0.1), -5.71429px -5.71429px 57.1429px #FFFFFF, 11.4286px 11.4286px 45.7143px rgba(111, 140, 176, 0.41)",
};
const mobileBtnStyle = {
boxShadow:
"3.9585px 3.9585px 7.917px rgba(114, 142, 171, 0.1), -3.9585px -3.9585px 39.585px #FFFFFF, 7.917px 7.917px 31.668px rgba(111, 140, 176, 0.41)",
borderRadius: "80px",
};
const Share = NiceModal.create(({ title, productId, type }: ShareProps) => {
const modal = useModal();
const theme = useTheme();
const isDesktop = useMediaQuery(theme.breakpoints.up("sm"));
const [value, setValue] = React.useState(0);
const handleChange = (event: React.SyntheticEvent, newValue: number) => {
setValue(newValue);
};
return (
<Modal
width="736px"
{...muiDialogV5(modal)}
title={title}
onClose={() => modal.hide()}
transitionDuration={{ appear: 0, enter: 0, exit: 200 }}
TransitionComponent={Fade}
>
<AddToYourWebsite productId={productId} type={type} />
</Modal>
);
// return (
// <Modal
// width="736px"
// {...muiDialogV5(modal)}
// title={title}
// onClose={() => modal.hide()}
// transitionDuration={{ appear: 0, enter: 0, exit: 200 }}
// TransitionComponent={Fade}
// >
// <Box mt={1} mb={2}>
// <Tabs
// gap={2}
// centered
// value={value}
// variant="fullWidth"
// onChange={handleChange}
// aria-label="share fundraiser options"
// orientation={isDesktop ? "horizontal" : "vertical"}
// >
// <ButtonTab
// icon={<ShareIcon width={32} height={32} />}
// iconPosition="start"
// label="Share on Social"
// />
// <ButtonTab
// icon={<CodeIcon />}
// iconPosition="start"
// label="Get a Custom Link"
// />
// <ButtonTab
// icon={<HomeIcon />}
// iconPosition="start"
// label="Add to your website"
// />
// </Tabs>
// </Box>
// <TabPanel index={0} value={value}>
// <Stack
// gap={2}
// height={128}
// direction="row"
// alignItems="center"
// justifyContent="center"
// >
// <IconButton size="large" sx={isDesktop ? btnStyle : mobileBtnStyle}>
// <FacebookIcon
// width={isDesktop ? 50 : 34.64}
// height={isDesktop ? 50 : 34.64}
// />
// </IconButton>
// <IconButton size="large" sx={isDesktop ? btnStyle : mobileBtnStyle}>
// <TwitterIcon
// width={isDesktop ? 50 : 34.64}
// height={isDesktop ? 50 : 34.64}
// />
// </IconButton>
// <IconButton size="large" sx={isDesktop ? btnStyle : mobileBtnStyle}>
// <PinterestIcon
// width={isDesktop ? 50 : 34.64}
// height={isDesktop ? 50 : 34.64}
// />
// </IconButton>
// <IconButton size="large" sx={isDesktop ? btnStyle : mobileBtnStyle}>
// <LinkedInIcon
// width={isDesktop ? 50 : 34.64}
// height={isDesktop ? 50 : 34.64}
// />
// </IconButton>
// </Stack>
// </TabPanel>
// <TabPanel index={1} value={value}>
// <CustomLink />
// </TabPanel>
// <TabPanel index={2} value={value}>
// <AddToYourWebsite productId={productId} />
// </TabPanel>
// </Modal>
// );
});
export default Share;
|