inputCV.js

import InputCSS from '../css/inputCV.module.css';

export default function InputCV(props) {
    return (
        <section className="input-cv">
            <Introduction
                setIntroduction={props.setIntroduction}
                onIntroductionChange={props.onIntroductionChange}
            />
            <Summary
            setSummary={props.setSummary}
            />
            <WorkHistory
                onWorkHistoryChange={props.onWorkHistoryChange}
            />
            <EducationHistory
                onEducationHistoryChange={props.onEducationHistoryChange}
                />
        </section>
    )
}

function Introduction({
    setIntroduction,
    onIntroductionChange,
    onEducationChange,
    onWorkHistoryChange
}) {
    return (
        <section className={InputCSS.introduction}>
            <label htmlFor="firstName">First Name :</label>
            <input type="text" name="firstName" placeholder="Terry" onChange={(event) => setIntroduction(onIntroductionChange(event, 'firstName'))}/>

            <label htmlFor="lastName">Last Name :</label>
            <input type="text" name="lastName" placeholder='Bogard' onChange={(event) => onIntroductionChange(event, 'lastName')}/>

            <label htmlFor="phoneNumber">Phone Number :</label>
            <input type="text" name="phoneNumber" placeholder='123-456-7890' onChange={(event) => onIntroductionChange(event, 'phoneNumber')}/>

            <label htmlFor="email">Email :</label>
            <input type="email" name='email' placeholder='terrybogardKOF@gmail.com' onChange={(event) => onIntroductionChange(event, 'email')}/>

            <label htmlFor="linkedIn">Linked-In :</label>
            <input type="text" name="linkedIn" placeholder='https://www.linkedin.com/in/terry-bogard/' onChange={(event) => onIntroductionChange(event, 'linkedIn')}/>

            <label htmlFor="website">Website :</label>
            <input type="text" name="website" placeholder='https://www.terrybogard.com/' onChange={(event) => onIntroductionChange(event, 'website')}/>
        </section>
    )
}

function Summary(props) {
    return (
        <section className={InputCSS.summary}>
            <label htmlFor="summaryTextArea">Summary :</label>
            <input type="textarea" name="summaryTextArea" placeholder='Write a brief description about yourself here!'></input>
        </section>
    )
}

function WorkHistory(props) {
    return (
        <section className={InputCSS.workHistory}>
            <label htmlFor="jobName1">Company 1 :</label>
            <input type="text" name="jobName1" />

            <label htmlFor="jobPosition1">Position :</label>
            <input type="text" name="jobPosition1" />

            <label htmlFor="startingDate1">Starting Date :</label>
            <input type="month" name="startingDate1" />

            <label htmlFor="endingDate1">Ending Date :</label>
            <input type="month" name="endingDate1" />

            <label htmlFor="jobDescription1">Description :</label>
            <input type="textarea" name="jobDescription1"></input>
        </section>
    )
}

function EducationHistory(props) {
    return (
        <section className={InputCSS.educationHistory}>
            <label htmlFor="educationName1">Education 1 :</label>
            <input type="text" name="educationName1" />

            <label htmlFor="certificate1">Position :</label>
            <input type="text" name="certificate1" />

            <label htmlFor="dateAchieved1">Starting Date :</label>
            <input type="month" name="dateAchieved1" />

            <label htmlFor="educationDescription1">Summary :</label>
            <input type="textarea" name="educationDescription1"></input>
        </section>
    )
}