Untitled
unknown
plain_text
10 months ago
40 kB
2
Indexable
import React from "react";
// Customizable Area Start
import {
Dialog,
Box,
Typography,
styled,
Grid,
Input,
TextField,
Backdrop, CircularProgress
} from "@material-ui/core";
import InputAdornment from '@material-ui/core/InputAdornment';
import ProductPreviewController, { Props, configJSON } from "./ProductPreviewScreenController.web";
import ShoppingCartOulineIcon from '@material-ui/icons/ShoppingCartOutlined';
import { CloseRounded as MuiClose } from "@material-ui/icons";
import { GooglePlayIcon, AppStore, SideArrow, TwitterSvg, AddIcon, Facebook, Instagram, CloseIcon, MenuIcon, searchIcon, ModalSearchIcon, Youtube, Linkdin, WhatsApp, CallIcon, EmailIcon, emailDesktop, callDesktop, whatsappDesktop, leftIcon, rightIcon } from "./assets";
import withLoader from "../../../ss-cms-common-components/src/HOC/withBrandingSpinner.web";
import "./styles.css";
import { withDialog } from "../../../ss-cms-common-components/src/Dialog/withDialog";
import withHeaderBar from "../../../ss-cms-common-components/src/HOC/withHeadeActionBar.Web";
// Customizable Area End
class ProductPreviewDesktopScreen extends ProductPreviewController {
constructor(props: Props) {
super(props);
// Customizable Area Start
// Customizable Area End
}
dynamicLogo() {
return (
<>
{this.props.statesData.removeLogo ?
<Box style={{
fontFamily: `${this.props.statesData.textLogoMetaData.fontType}`,
fontSize: "25.24px",
fontWeight: 500,
letterSpacing: "-0.02em",
color: `${this.props.statesData.textLogoMetaData.colour}`
}}> {this.props.statesData?.storeName}</Box>
:
<>
{this.props?.updateData?.header?.isLogoUploaded ? (
<img src={this.props?.updateData?.header?.selectedLogo} alt="Logo" height="34px" />
) : (
<Box style={{
fontFamily: `${this.props.statesData.textLogoMetaData.fontType}`,
fontSize: 18,
fontWeight: 500,
letterSpacing: "-0.02em",
color: `${this.props.statesData.textLogoMetaData.colour}`,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap',
// textAlign: 'center',
width: '100%',
maxWidth: 115,
}} id="dynamic-logo"> {this.props.statesData?.storeName}</Box>
)}
</>
}
</>
)
}
render() {
// Customizable Area Start
const modalBanner = this.props.statesData.modalBanner.base64Image;
const modalProperties = modalBanner ? {
paperProps: { style: { backgroundImage: `url(${modalBanner})` } },
contentProps: { style: { margin: 0, marginTop: "auto" } },
overlayElement: <div className="marketing-dialog-overlay" />
} : {
paperProps: { style: { background: "var(--modal-background-color)" } },
contentProps: { style: {} },
overlayElement: null
};
// Customizable Area End
return (
// Customizable Area Start
<>
{
this.props.statesData.isLoading ?
<Backdrop style={{ zIndex: 9999 }} open={this.props.statesData.isLoading} >
<div
style={{
position: "absolute",
left: "50%",
top: "50%",
transform: "translate(-50%, -50%)",
}}
>
<CircularProgress
size="5rem"
color="primary"
data-testid="page-loader"
/>
</div>
</Backdrop> :
<ProductPreviewBox id="myScrollableDiv">
<DesktopPreview>
<DesktopPreviewHeader id="headerUnique">
<HeaderIconAndNameHolder title={this.props.statesData?.storeName}>
{this.dynamicLogo()}
<Box style={{ display: 'flex', gap: '10px', marginLeft: '15px' }}>
{this?.props?.statesData?.updateData?.header?.navigationMenuOptions?.menuData?.map((item: any) =>
item.selectedOption === "Select" ? null : (
<Box key={item.id}>
<Box sx={{ fontSize: '8px', fontWeight: 700, color: 'var(--secondary-color)', fontFamily: 'var(--body-text-font) !important' }}>{item.selectedOption}</Box>
</Box>
)
)}
</Box>
</HeaderIconAndNameHolder>
<Box style={{ padding: "10px 0px", width: '200px', display: 'flex', alignItems: 'center', gap: '10px' }}>
<TextField variant="outlined" placeholder="Search" style={{ borderRadius: '30px' }} size="small" InputProps={{
style: {
borderRadius: "30px",
height: '28px',
width: '100%',
},
startAdornment: (
<InputAdornment position="start">
<HeaderSearchIcon src={ModalSearchIcon} />
</InputAdornment>
),
}} />
<ShoppingCartOulineIcon style={{ fontSize: '20px', color: '#000' }} />
</Box>
</DesktopPreviewHeader>
{this.props.statesData.SectionData?.map((section: any, index: any) => {
if (section?.type?.toLowerCase() === "banner" && !section.is_deleted) {
return section.desktopBannerUpload && section.desktopBannerUpload.length > 0 ? (
<div key={index} style={{ position: "relative" }} id={`section${index}Unique`}>
<img src={section.desktopBannerUpload} style={{ height: "312px", width: "712px" }} alt="test" />
{section.desktopBannerMetadata?.header_text && (
<span id="font-family-header" style={{
position: 'absolute',
height: '100%',
width: '100%',
top: 0,
left: 0,
fontWeight: 600,
padding: 30,
display: 'flex',
whiteSpace: 'pre-line',
overflow: 'hidden',
textAlign: section.desktopBannerMetadata.text_alignment.toLowerCase(),
justifyContent: this.getBannerTextPosition(section, 'desktop').justifyContent,
alignItems: this.getBannerTextPosition(section, 'desktop').alignItems,
color: section.desktopBannerMetadata.font_colour,
fontSize: Number(section.desktopBannerMetadata.font_size),
}}>
{section.desktopBannerMetadata.header_text}
</span>
)}
</div>
) : (
<AddBannerSection>
<InnerAddBannerBox>
<AddIconBox>
<AddBannerPlusIcon src={AddIcon} />
</AddIconBox>
<AddBannerText>Add Banner</AddBannerText>
<AddBannerSizeText>Max 20MB</AddBannerSizeText>
</InnerAddBannerBox>
</AddBannerSection>
);
} else if (section?.type?.toLowerCase() === "category" && !section.is_deleted) {
const selectedCategories = section.metadata.categories.filter(
(category: any) => category.selected !== "Select"
);
return (
<CircleSectionBox key={section.id} style={{ position: 'relative' }} id={`section${index}Unique`}>
<SectionHeading>{section.sectionName}</SectionHeading>
<span style={{ position: 'absolute', marginTop: '23px', top: 0, right: 5, marginRight: '15px', }}><img src={leftIcon} /><img src={rightIcon} /></span>
<CircleSectionContentBox>
{selectedCategories.length > 0 ?
selectedCategories.map((item: any, index: number) => (
<Grid
item
direction="column"
justifyContent="flex-start"
alignItems="flex-start"
key={index}
xs={3}
>
<Box style={{ display: "flex", flexDirection: "column", alignItems: "center", gap: "10px" }}>
<img
style={{
height: "127px",
width: "127px",
borderRadius: "100%"
}}
src={item.category_image}
alt={item.category_name}
/>
<CategoryName style={{ textAlign: 'center', fontSize: '11.79px', fontWeight: 600, lineHeight: "16px" }}>{item.selected}</CategoryName>
</Box>
</Grid>
)) :
<Box style={{ display: 'flex', justifyContent: 'center', width: '100%', gap: "10px" }}>
<CircleContentBox />
<CircleContentBox />
<CircleContentBox />
<CircleContentBox />
<CircleContentBox />
</Box>
}
</CircleSectionContentBox>
</CircleSectionBox>
);
} else if (section?.type?.toLowerCase() === "product" && !section.is_deleted) {
const selectedCategories = section?.metadata?.products?.filter((category: any) => category.selected !== "Select");
return (
<Box key={section.id} id={`section${index}Unique`} style={{ padding: "25px 0px" }}>
<Box style={{ position: 'relative' }}>
<SectionHeading>{section.sectionName}</SectionHeading>
<span id="font-family-header" style={{ position: 'absolute', top: 0, right: 5, color: 'var(--primary-color)', marginRight: '15px', fontSize: '9px', fontWeight: 400, borderRadius: '30px', padding: '4px 10px', background: 'var(--accent-color)' }}>View more</span>
</Box>
<RectangularSectionBox>
{selectedCategories.length > 0 ? (
<Grid container direction="row" justifyContent="flex-start" alignItems="center">
{selectedCategories.map((category: any) => (
category.products.map((item: any, index: number) => {
// Check if the product's name matches the selected value
if (item.product_name === category.selected) {
return (
<Grid item xs={3} key={index} style={{ display: "flex", justifyContent: "center" }}>
<ProductItemBox>
<img
style={{ height: "198px" }}
src={item.product_image}
alt={item.product_name}
/>
<ProductItemData>
<ProductName>{item.product_name.substring(0, 20)}</ProductName>
<ProductPriceText>{item.new_rate}</ProductPriceText>
{item.discount > 0 && (
<DiscountPriceBox>
<CrossPriceText>{item.old_rate}</CrossPriceText>
<DiscountPriceText>{item.discount}% off</DiscountPriceText>
</DiscountPriceBox>
)}
</ProductItemData>
</ProductItemBox>
</Grid>
);
} else {
return null; // If the product's name does not match, don't render it
}
})
))}
</Grid>
) : (
<Grid container direction="row" justifyContent="flex-start" alignItems="center">
{[1, 2, 3, 4].map((item, index) => (
<Grid item xs={3} key={index}>
<ProductItemBox>
<ProductItemImage></ProductItemImage>
<ProductItemData>
<ProductName>AIR JORDAN 1 MID</ProductName>
<ProductPriceText>� 129,95</ProductPriceText>
<DiscountPriceBox>
<CrossPriceText>� 149,00</CrossPriceText>
<DiscountPriceText>20% off</DiscountPriceText>
</DiscountPriceBox>
</ProductItemData>
</ProductItemBox>
</Grid>
))}
</Grid>
)}
</RectangularSectionBox>
</Box>
);
}
})}
<FooterSectionBox id="footerUnique">
{this.props.statesData.updateData.footer?.is_contact &&
<Box>
<FooterHeadingText>Contact Us</FooterHeadingText>
<FooterSocialLinkBox>
<FooterSocialLinkIcon src={emailDesktop} />
<FooterSubHeadingText>Send Email</FooterSubHeadingText>
</FooterSocialLinkBox>
<FooterSocialLinkBox>
<FooterSocialLinkIcon src={callDesktop} />
<FooterSubHeadingText>Call us : (+44) 1234-567-89</FooterSubHeadingText>
</FooterSocialLinkBox>
<FooterSocialLinkBox>
<FooterSocialLinkIcon src={whatsappDesktop} />
<FooterSubHeadingText>Chat on WhatsApp</FooterSubHeadingText>
</FooterSocialLinkBox>
</Box>
}
<Box>
<FooterHeadingText>Useful Links</FooterHeadingText>
<FooterSubHeadingText>Terms & Conditions</FooterSubHeadingText>
<FooterSubHeadingText>Refund Policy</FooterSubHeadingText>
<FooterSubHeadingText>FAQ</FooterSubHeadingText>
</Box>
{this.props.statesData.updateData.footer?.is_social_media && (this.props.statesData.updateData.footer?.facebook_url.toString()?.length > 0 || this.props.statesData.updateData.footer?.instagram_url.toString()?.length > 0 || this.props.statesData.updateData.footer.x_url.toString().length > 0 || this.props.statesData.updateData.footer?.youtube_url.toString()?.length > 0 || this.props.statesData.updateData.footer?.linkedin_url.toString()?.length > 0) &&
<Box>
<FooterHeadingText>Follow us </FooterHeadingText>
{(this.props.statesData.updateData.footer.facebook_url && this.props.statesData.updateData.footer?.is_social_media) &&
<FooterSocialLinkBox href={this.props.statesData.updateData.footer.facebook_url.toString()} target="_blank">
<FooterSocialLinkIcon src={Facebook} />
<FooterSubHeadingText>Facebook</FooterSubHeadingText>
</FooterSocialLinkBox>
}
{this.props.statesData.updateData.footer.instagram_url && this.props.statesData.updateData.footer?.is_social_media &&
<FooterSocialLinkBox href={this.props.statesData.updateData.footer.instagram_url.toString()} target="_blank">
<FooterSocialLinkIcon src={Instagram} />
<FooterSubHeadingText>Instagram</FooterSubHeadingText>
</FooterSocialLinkBox>
}
{(this.props.statesData.updateData.footer.x_url && this.props.statesData.updateData.footer?.is_social_media) &&
<FooterSocialLinkBox href={this.props.statesData.updateData.footer.x_url.toString()} target="_blank">
<FooterSocialLinkIcon src={TwitterSvg} />
<FooterSubHeadingText>Twitter</FooterSubHeadingText>
</FooterSocialLinkBox>
}
{this.props.statesData.updateData.footer.linkedin_url && this.props.statesData.updateData.footer?.is_social_media &&
<FooterSocialLinkBox href={this.props.statesData.updateData.footer.linkedin_url.toString()} target="_blank">
<FooterSocialLinkIcon src={Linkdin} />
<FooterSubHeadingText>LinkedIn</FooterSubHeadingText>
</FooterSocialLinkBox>
}
{this.props.statesData.updateData.footer.youtube_url && this.props.statesData.updateData.footer?.is_social_media &&
<FooterSocialLinkBox href={this.props.statesData.updateData.footer.youtube_url.toString()} target="_blank">
<FooterSocialLinkIcon src={Youtube} />
<FooterSubHeadingText>Youtube</FooterSubHeadingText>
</FooterSocialLinkBox>
}
</Box>
}
<Box>
{this.props.statesData.updateData?.footer?.is_app_link && (this.props.statesData.updateData?.footer?.playstore_url.toString()?.length > 0 || this.props.statesData.updateData?.footer?.appstore_url.toString()?.length > 0) &&
<FooterHeadingText>Download App</FooterHeadingText>
}
<MainBox>
{this.props.statesData.updateData?.footer?.playstore_url.toString()?.length > 0 && this.props.statesData.updateData?.footer?.is_app_link &&
<FooterStoreIconBox href={this.props.statesData.updateData?.footer?.playstore_url.toString()} target="_blank">
<FooterStoreIcon src={GooglePlayIcon} />
</FooterStoreIconBox>
}
{this.props.statesData.updateData.footer?.appstore_url.toString()?.length > 0 && this.props.statesData.updateData?.footer?.is_app_link &&
<FooterStoreIconBox href={this.props.statesData.updateData?.footer?.appstore_url.toString()} target="_blank">
<FooterStoreIcon src={AppStore} />
</FooterStoreIconBox>
}
</MainBox>
</Box>
</FooterSectionBox>
<FooterCopyRightBox>
{this.props.statesData.updateData.footer?.copyright &&
<FooterCopyRightText component={"span"}>
{this.props.statesData.updateData.footer?.copyright} -
</FooterCopyRightText>
}
<FooterCopyRightText component={"span"}>
{configJSON.textFooterPowered} <FooterBuilderText>{configJSON.textFooterBuilderAi}</FooterBuilderText>
</FooterCopyRightText>
</FooterCopyRightBox>
{/* POPUP FORM */}
<Dialog
disableEnforceFocus
disablePortal
open
classes={{ root: "marketing-dialog-root" }}
BackdropProps={{ classes: { root: "marketing-dialog-backdrop" } }}
PaperProps={{
className: "marketing-dialog-paper",
style: modalProperties.paperProps.style
}}
className="marketing-dialog-root"
transitionDuration={0}
>
{modalProperties.overlayElement}
<div className="marketing-dialog-close-icon-wrapper">
<MuiClose fontSize="large" style={{ color: "#fff" }} />
</div>
<div className="marketing-dialog-content-wrapper" style={modalProperties.contentProps.style}>
<p style={{ whiteSpace: "break-spaces", lineBreak: "anywhere", fontWeight: 700, margin: 0, fontFamily: "var(--header-text-font)", color: "var(--modal-title-color)", fontSize: "var(--modal-title-size)" }}>{this.props.statesData.modalTitle}</p>
<p style={{ whiteSpace: "break-spaces", lineBreak: "anywhere", fontWeight: 400, margin: 0, fontFamily: "var(--body-text-font)", color: "var(--modal-description-color)", fontSize: "var(--modal-description-size)" }}>{this.props.statesData.modalDescription}</p>
{this.props.statesData.modalFieldTypes.filter((field: any) => field.selected === true).map((field: any, index: number) => (
<input
key={index}
type={field.type}
placeholder={field.label}
style={{ padding: "10px", borderRadius: "8px", border: "none", outline: "none", fontSize: "12px", fontFamily: "var(--body-text-font)" }}
/>
))}
<button style={{ padding: "10px", borderRadius: "8px", border: "none", outline: "none", background: "linear-gradient(99.09deg, var(--accent-color) 2.64%, var(--primary-color) 100%)", color: "#ffffff", cursor: "pointer", fontFamily: "var(--body-text-font)", fontWeight: 700 }}>Submit</button>
</div>
</Dialog>
</DesktopPreview>
</ProductPreviewBox>
}
</>
// Customizable Area End
);
}
};
// Customizable Area Start
export default withDialog(withLoader(withHeaderBar(ProductPreviewDesktopScreen)));
export { ProductPreviewDesktopScreen }
// Customizable Area End
// Customizable Area Start
const CircleContentBox = styled(Box)({
height: "127px",
width: "127px",
borderRadius: "100%",
backgroundColor: "#D9D9D9",
flex: "0 0 auto"
});
const DiscountPriceText = styled(Typography)({
color: "var(--primary-color)",
fontFamily: "var(--body-text-font) !important",
fontSize: "6.912px",
fontStyle: "normal",
fontWeight: 400,
lineHeight: "10.863px",
})
const RectangularSectionBox = styled(Box)({
padding: "0px 5px"
});
const DiscountPriceBox = styled(Box)({
display: "flex",
columnGap: "5px"
})
const AddBannerPlusIcon = styled("img")({
height: "15px",
width: "15px"
});
const ProductItemBox = styled(Box)({
display: "flex",
flexDirection: "column",
marginTop: "10px",
alignItems: "center",
width: "160px",
overflow: "hidden",
borderRadius: "8px",
boxShadow: "0px 8px 32px 0px #0000000f, 0px 4px 8px 0px #00000008",
height: "270px",
})
const CrossPriceText = styled(Typography)({
color: "var(--secondary-color)",
opacity: 0.4,
fontFamily: "var(--body-text-font)",
fontSize: "6.912px",
fontStyle: "normal",
fontWeight: 400,
lineHeight: "10.863px",
textDecoration: "line-through"
})
const ProductItemImage = styled(Box)({
width: "162px",
height: "198px",
backgroundColor: "#D9D9D9",
borderTopLeftRadius: "5px",
borderTopRightRadius: '5px'
})
const ProductItemData = styled(Box)({
display: "flex",
flexDirection: "column",
rowGap: "10px",
backgroundColor: "#ffffff",
borderRadius: "3.95px",
padding: "10px",
width: "160px",
borderBottomLeftRadius: "5px",
borderBottomRightRadius: "5px"
})
const ProductName = styled(Typography)({
color: "var(--secondary-color)",
fontFamily: "var(--header-text-font) !important",
fontSize: "6.912px",
fontStyle: "normal",
fontWeight: 700,
lineHeight: "10.863px"
})
const CategoryName = styled(Typography)({
color: "var(--secondary-color)",
fontFamily: "var(--body-text-font) !important",
fontSize: "6.912px",
fontStyle: "normal",
fontWeight: 700,
lineHeight: "10.863px"
})
const ProductPriceText = styled(Typography)({
color: "var(--secondary-color)",
fontFamily: "var(--body-text-font) !important",
fontSize: "6.912px",
fontStyle: "normal",
fontWeight: 600,
lineHeight: "10.863px"
})
const CircleSectionContentBox = styled(Box)({
display: "flex",
columnGap: "10px",
"&::-webkit-scrollbar": {
width: " 0.5em",
},
"&::-webkit-scrollbar-thumb": {
backgroundColor: "FFF"
},
"&::-webkit-scrollbar-track": {
backgroundColor: "FFF"
}
});
const SectionHeading = styled(Typography)({
color: "var(--primary-color)",
fontFamily: "var(--header-text-font) !important",
fontSize: "15px",
fontWeight: 700,
lineHeight: "16.027px",
textAlign: "center",
margin: "20px 0px",
});
const HeaderSearchIcon = styled("img")({
width: "17.5px",
height: "17.5px",
objectFit: "contain",
});
const AddBannerText = styled(Typography)({
fontSize: "20px",
fontWeight: 500,
letterSpacing: "-0.4px",
color: "#676B7E"
});
const CircleSectionBox = styled(Box)({
padding: "25px 0",
position: "relative"
});
const AddBannerSizeText = styled(Typography)({
fontSize: "10px",
fontWeight: 400,
color: "#676B7E"
});
const AddIconBox = styled(Box)({
display: "flex",
width: "16px",
height: "16px",
padding: "0.5px",
justifyContent: "center",
alignItems: "center"
});
const InnerAddBannerBox = styled(Box)({
borderRadius: "10px",
border: "2px dashed #C0C3CE",
height: "100%",
width: "100%",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
});
const FooterCopyRightBox = styled(Box)({
width: "100%",
backgroundColor: "#fffffff",
display: "flex",
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
padding: "10px 0",
});
const HeaderIconAndNameHolder = styled(Box)({
display: 'flex',
alignItems: 'center',
color: 'rgba(0, 0, 0, 1)',
width: '100%',
maxWidth: '450px',
});
const AddLogoText = styled(Typography)({
fontSize: "7px",
fontWeight: 500,
color: "#676B7E"
});
const AddLogoBox = styled(Box)({
width: "50px",
height: "34px",
borderRadius: "6px",
border: "2px dashed #adafbd",
padding: "5px",
display: "flex",
flexDirection: "column",
justifyContent: "center",
alignItems: "center",
boxSizing: "border-box",
rowGap: "2px"
});
const AddLogoPlusIcon = styled("img")({
width: "9.2px",
height: "7.5px",
padding: "0.31px 0.25px",
objectFit: "contain",
color: "#67687E"
});
const AddBannerSection = styled(Box)({
width: "712px",
height: "100%",
padding: "30px",
boxSizing: "border-box",
backgroundColor: "#D9D9D9",
position: "relative",
});
const FooterCopyRightText = styled(Box)({
color: "#64748B",
textAlign: "center",
fontSize: "10px",
fontWeight: 400,
lineHeight: "20px",
});
const FooterBuilderText = styled("a")({
color: "#64748B",
fontFamily: "var(--body-text-font) !important",
})
const ProductPreviewBox = styled(Box)({
width: "100%",
backgroundColor: "#f6f7f9",
display: "flex",
justifyContent: "center",
boxSizing: "border-box",
padding: "25px",
overflow: 'auto',
height: 'calc(100vh - 212px)'
});
const MainBox = styled(Box)({
display: "flex",
flexDirection: "column"
})
const DesktopPreview = styled(Box)({
position: "relative",
width: "711px",
backgroundColor: "#ffffff",
boxShadow:
"0px 8px 32px 0px rgba(0, 0, 0, 0.06), 0px 4px 8px 0px rgba(0, 0, 0, 0.03)",
height: "100%",
overflowY: "hidden",
});
const FooterSectionBox = styled(Box)({
width: "100%",
padding: "30px 70px",
backgroundColor: "#ffffff",
boxSizing: "border-box",
display: 'flex',
gap: "70px"
});
const FooterStoreIconBox = styled("a")({
width: "113px",
height: "30px",
borderRadius: "5px",
textDecoration: "none"
});
const FooterStoreIcon = styled("img")({
width: "68.137px",
height: "26.169px"
});
const FooterHeadingText = styled(Typography)({
color: "var(--secondary-color)",
fontSize: "7px",
fontWeight: 700,
lineHeight: "11px",
margin: "10px 0",
fontFamily: "var(--body-text-font) !important"
});
const FooterSocialLinkBox = styled("a")({
display: "flex",
alignItems: "center",
columnGap: "5px",
textDecoration: "none"
});
const FooterSocialLinkIcon = styled("img")({
width: "7px",
height: "7px",
objectFit: "contain",
});
const FooterSubHeadingText = styled(Typography)({
color: "var(--secondary-color)",
fontSize: "7px",
fontWeight: 400,
lineHeight: "11px",
margin: "2px 0",
fontFamily: "var(--body-text-font) !important"
});
const DesktopPreviewHeader = styled(Box)({
width: "100%",
height: "56px",
padding: "10px 30px",
display: "flex",
justifyContent: "space-between",
alignItems: "center",
boxSizing: "border-box"
});
// Customizable Area End Editor is loading...
Leave a Comment