{"version":3,"file":"static/js/351.653482ec.chunk.js","mappings":"oLAuBe,SAASA,EAAkBC,GAatC,IAbuC,YACvCC,EAAW,SACXC,EAAQ,MACRC,EAAK,YACLC,EAAW,WACXC,EAAU,gBACVC,EAAe,cACfC,EAAa,aACbC,EAAY,eACZC,EAAc,UACdC,EAAYA,SAAQ,QACpBC,EAAUA,SAAQ,eAClBC,GACHZ,EACG,OACIa,EAAAA,EAAAA,KAAA,OAAKC,IAAKC,EAAeP,EAAcC,IAClCR,IAAeY,EAAAA,EAAAA,KAAA,OAAKC,IAAKE,EAAoBd,MAC9CW,EAAAA,EAAAA,KAAA,OAAKC,IAAKG,GACLd,IACGU,EAAAA,EAAAA,KAACK,EAAAA,EAAU,CAACC,QAAQ,KAAKL,KAAKA,EAAAA,EAAAA,KAAIM,EAAU,KACvCjB,GAGRC,IACGS,EAAAA,EAAAA,KAACK,EAAAA,EAAU,CAACC,QAAQ,YAAYL,IAAKO,GAChCjB,KAIbS,EAAAA,EAAAA,KAAA,OAAKC,IAAKQ,IACNT,EAAAA,EAAAA,KAACU,EAAAA,EAAM,CACHT,KAAKA,EAAAA,EAAAA,KAAI,CAACU,EAAYjB,GAAgBkB,EAAkBlB,IAAe,IACvEmB,QAAShB,EACTiB,SAAUf,IAEVC,EAAAA,EAAAA,KAACK,EAAAA,EAAU,CAACC,QAAQ,YAAYL,IAAKc,EAAUtB,IAC1CD,KAGTQ,EAAAA,EAAAA,KAACU,EAAAA,EAAM,CAACT,KAAKA,EAAAA,EAAAA,KAAI,CAACU,EAAYhB,GAAeqB,GAAiB,IAAGH,QAASf,IACtEE,EAAAA,EAAAA,KAACK,EAAAA,EAAU,CAACC,QAAQ,YAAYL,IAAKc,EAAUnB,IAC1CqB,EAAAA,EAAQC,EAAE,gBAMnC,CAEA,MAAMN,EAAoBlB,IAAiBO,EAAAA,EAAAA,KAAG,2BAElBP,EAAa,MAInCsB,EAAgB,CAAAG,KAAA,UAAAC,OAAA,yCAMhBlB,EAAiBA,CAACP,EAAcC,KAAmBK,EAAAA,EAAAA,KAAG,+DAI/CL,EAAc,qBACHD,EAAY,uHAS9BQ,EAAsBd,IAAYY,EAAAA,EAAAA,KAAG,sDAGfZ,EAAQ,gHAO9Be,EAAkB,CAAAe,KAAA,SAAAC,OAAA,iCAIlBX,EAAoB,CAAAU,KAAA,SAAAC,OAAA,iCAKpBb,EAAU,CAAAY,KAAA,SAAAC,OAAA,sBAIVZ,EAAgB,CAAAW,KAAA,SAAAC,OAAA,sBAIhBT,EAAcU,IAAWpB,EAAAA,EAAAA,KAAG,sGAMVoB,EAAO,KAGzBN,EAAYO,IAAarB,EAAAA,EAAAA,KAAG,SACrBqB,EAAS,oF","sources":["components/ReferralNotifyCard.js"],"sourcesContent":["import React from 'react';\nimport { css } from '@emotion/core';\nimport Typography from '@material-ui/core/Typography';\nimport { Button } from '@material-ui/core';\nimport i18next from 'i18next';\n\n/**\n * @method ReferralNotifyCard - 邀請提示卡片\n * @param {Object}   props\n * @param {String}   props.isShowImage - 是否顯示圖片\n * @param {String}   props.imageUrl - 圖片網址\n * @param {String}   props.title - 標題\n * @param {String}   props.description - 文案\n * @param {String}   props.buttonText - 按鈕文字\n * @param {String}   props.buttonTextColor - 按鈕文字顏色\n * @param {String}   props.buttonBgColor - 按鈕背景\n * @param {String}   props.themeTextColor - 主題文字顏色\n * @param {String}   props.themeBgColor - 主題背景\n * @param {Function} props.onConfirm - 確認事件\n * @param {Function} props.onClose - 關閉事件\n * @param {Boolean}  props.disableConfirm - 禁用確認按鈕\n * @returns {JSX.Element}\n */\nexport default function ReferralNotifyCard({\n    isShowImage,\n    imageUrl,\n    title,\n    description,\n    buttonText,\n    buttonTextColor,\n    buttonBgColor,\n    themeBgColor,\n    themeTextColor,\n    onConfirm = () => {},\n    onClose = () => {},\n    disableConfirm\n}) {\n    return (\n        <div css={containerStyle(themeBgColor, themeTextColor)}>\n            {isShowImage && <div css={imageContainerStyle(imageUrl)}></div>}\n            <div css={infoContainerStyle}>\n                {title && (\n                    <Typography variant=\"h6\" css={css(titleStyle)}>\n                        {title}\n                    </Typography>\n                )}\n                {description && (\n                    <Typography variant=\"subtitle2\" css={descriptionStyle}>\n                        {description}\n                    </Typography>\n                )}\n            </div>\n            <div css={buttonContainerStyle}>\n                <Button\n                    css={css([buttonStyle(buttonBgColor), actionButtonStyle(buttonBgColor)])}\n                    onClick={onConfirm}\n                    disabled={disableConfirm}\n                >\n                    <Typography variant=\"subtitle2\" css={textStyle(buttonTextColor)}>\n                        {buttonText}\n                    </Typography>\n                </Button>\n                <Button css={css([buttonStyle(themeBgColor), closeButtonStyle])} onClick={onClose}>\n                    <Typography variant=\"subtitle2\" css={textStyle(themeTextColor)}>\n                        {i18next.t('btn.close')}\n                    </Typography>\n                </Button>\n            </div>\n        </div>\n    );\n}\n\nconst actionButtonStyle = buttonBgColor => css`\n    :hover {\n        background-color: ${buttonBgColor};\n    }\n`;\n\nconst closeButtonStyle = css`\n    :hover {\n        background-color: transparent;\n    }\n`;\n\nconst containerStyle = (themeBgColor, themeTextColor) => css`\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    color: ${themeTextColor};\n    background-color: ${themeBgColor};\n    max-width: 320px;\n    border-radius: 12px;\n    width: 100%;\n    box-shadow: 0px 1px 8px 0px #00000033;\n    max-height: 600px;\n    overflow: auto;\n`;\n\nconst imageContainerStyle = imageUrl => css`\n    width: 100%;\n    padding-top: 66.67%;\n    background-image: url(${imageUrl});\n    background-size: cover;\n    background-position: center;\n    border-top-left-radius: 12px;\n    border-top-right-radius: 12px;\n`;\n\nconst infoContainerStyle = css`\n    padding: 12px 16px;\n    width: 100%;\n`;\nconst buttonContainerStyle = css`\n    padding: 12px 16px;\n    width: 100%;\n`;\n\nconst titleStyle = css`\n    text-align: center;\n`;\n\nconst descriptionStyle = css`\n    text-align: center;\n`;\n\nconst buttonStyle = bgColor => css`\n    width: 100%;\n    min-height: 48px;\n    padding: 10px, 16px, 10px, 16px;\n    border-radius: 24px;\n    gap: 8px;\n    background-color: ${bgColor};\n`;\n\nconst textStyle = textColor => css`\n    color: ${textColor};\n    overflow: hidden;\n    text-overflow: ellipsis;\n    box-sizing: border-box;\n    white-space: nowrap;\n`;\n"],"names":["ReferralNotifyCard","_ref","isShowImage","imageUrl","title","description","buttonText","buttonTextColor","buttonBgColor","themeBgColor","themeTextColor","onConfirm","onClose","disableConfirm","___EmotionJSX","css","containerStyle","imageContainerStyle","infoContainerStyle","Typography","variant","titleStyle","descriptionStyle","buttonContainerStyle","Button","buttonStyle","actionButtonStyle","onClick","disabled","textStyle","closeButtonStyle","i18next","t","name","styles","bgColor","textColor"],"sourceRoot":""}