import React from 'react'; import styled from 'styled-components'; import { rgba, lighten } from 'polished'; import theme from '../../style/theme'; import Modal from '../Global/Modal'; import ModalFooter from '../Global/ModalFooter'; import Button from '../Global/Button'; import scheduleDoc from '../../Assets/docs/schedule.doc'; const MsgDetailLanguageModal = ({ modalState, onClickCloseModal }) => { return ( <StPdfModal width="55rem" height="fit-content" modalState={modalState} setModalState={onClickCloseModal} header > <StPdfModalWrapper> <StPdfModalTitle>언어를 선택하세요</StPdfModalTitle> <StPdfModalSub> 예약 세부정보가 저장되는 언어입니다. 나중에 인쇄할 수 있습니다. </StPdfModalSub> <StPdfModalRadioWrapper> <StPdfModalLabel> <StPdfModalText>선호하는 언어</StPdfModalText> <StPdfModalInput type="radio" name="lang" checked={true} /> </StPdfModalLabel> <StPdfModalLabel> <StPdfModalText>중국어</StPdfModalText> <StPdfModalInput type="radio" name="lang" /> </StPdfModalLabel> <StPdfModalLabel> <StPdfModalText>영어</StPdfModalText> <StPdfModalInput type="radio" name="lang" /> </StPdfModalLabel> <StPdfModalLabel> <StPdfModalText>프랑스어</StPdfModalText> <StPdfModalInput type="radio" name="lang" /> </StPdfModalLabel> <StPdfModalLabel> <StPdfModalText>독일어</StPdfModalText> <StPdfModalInput type="radio" name="lang" /> </StPdfModalLabel> <StPdfModalLabel> <StPdfModalText>이탈리아어</StPdfModalText> <StPdfModalInput type="radio" name="lang" /> </StPdfModalLabel> <StPdfModalLabel> <StPdfModalText>일본어</StPdfModalText> <StPdfModalInput type="radio" name="lang" /> </StPdfModalLabel> <StPdfModalLabel> <StPdfModalText>한국어</StPdfModalText> <StPdfModalInput type="radio" name="lang" /> </StPdfModalLabel> <StPdfModalLabel> <StPdfModalText>포르투갈어</StPdfModalText> <StPdfModalInput type="radio" name="lang" /> </StPdfModalLabel> <StPdfModalLabel> <StPdfModalText>러시아어</StPdfModalText> <StPdfModalInput type="radio" name="lang" /> </StPdfModalLabel> <StPdfModalLabel> <StPdfModalText>스페인어</StPdfModalText> <StPdfModalInput type="radio" name="lang" /> </StPdfModalLabel> </StPdfModalRadioWrapper> </StPdfModalWrapper> <StModalFooter> <StForm method="get" action={scheduleDoc}> <Button type="submit" color="black" width="100%" height="4.5rem" hover={`background: ${rgba(theme.color.black, 0.9)}`} onClick={onClickCloseModal} > 저장 </Button> </StForm> </StModalFooter> </StPdfModal> ); }; const StPdfModal = styled(Modal)` padding-bottom: 7rem; max-height: 85rem; `; const StPdfModalWrapper = styled.div` padding: 2.5rem; `; const StPdfModalTitle = styled.h2` font-size: 2.5rem; font-weight: bold; `; const StPdfModalSub = styled.div` margin-top: 3rem; padding-top: 1rem; font-size: 1.5rem; font-weight: light; word-break: keep-all; line-height: 2rem; `; const StPdfModalRadioWrapper = styled.div` padding: 2rem 0rem 3rem; height: 50rem; overflow: scroll; `; const StPdfModalLabel = styled.label` display: flex; justify-content: space-between; padding: 3rem 0rem; border-bottom: 1px solid ${({ theme }) => lighten(0.1, theme.color.gray)}; & + label { border-bottom: 1px solid ${({ theme }) => lighten(0.1, theme.color.gray)}; } cursor: pointer; `; const StPdfModalInput = styled.input` width: 2rem; height: 2rem; margin-right: 2rem; cursor: pointer; `; const StPdfModalText = styled.div` font-weight: light; `; const StModalFooter = styled(ModalFooter)` display: flex; justify-content: space-between; padding-top: 1.5rem; padding-bottom: 1.5rem; `; const StForm = styled.form` width: 100%; `; export default MsgDetailLanguageModal;