53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import { motion } from 'framer-motion';
|
|
import { BusinessMemberInfoKeys, InfoProps } from '../model/types';
|
|
import { InfoArrow } from './info-arrow';
|
|
|
|
export const InfoContractManager = ({
|
|
infoContractManager,
|
|
show,
|
|
onClickToShowInfo
|
|
}: InfoProps) => {
|
|
|
|
const variants = {
|
|
hidden: { height: 0, padding: 0, display: 'none' },
|
|
visible: { height: 'auto', paddingTop: '12px', display: 'block' },
|
|
};
|
|
|
|
const onClickToSetShowInfo = () => {
|
|
if(!!onClickToShowInfo){
|
|
onClickToShowInfo(BusinessMemberInfoKeys.InfoContractManager);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className="section">
|
|
<div className="section-title"
|
|
onClick={ () => onClickToSetShowInfo() }
|
|
>
|
|
계약 담당자 <InfoArrow show={ show }></InfoArrow>
|
|
</div>
|
|
<motion.ul
|
|
className="kv-list"
|
|
initial="hidden"
|
|
animate={ (show)? 'visible': 'hidden' }
|
|
variants={ variants }
|
|
transition={{ duration: 0.3 }}
|
|
>
|
|
<li className="kv-row">
|
|
<span className="k">김테스트</span>
|
|
<span className="v"></span>
|
|
</li>
|
|
<li className="kv-row">
|
|
<span className="k">010-1234-****</span>
|
|
<span className="v"></span>
|
|
</li>
|
|
<li className="kv-row">
|
|
<span className="k">testkim@nicepay.co.kr</span>
|
|
<span className="v"></span>
|
|
</li>
|
|
</motion.ul>
|
|
</div>
|
|
</>
|
|
);
|
|
}; |