);
const TabButton = ({ label, id, isActive, onClick, icon }) => (
);
const PersonalDataForm = ({ data, onUpdate }) => {
const handleInputChange = (e) => {
const { name, value } = e.target;
onUpdate({ [name]: value });
};
return (
);
};
const EmotionalWellbeingForm = ({ data, onUpdate }) => {
const handleInputChange = (e) => {
const { name, value } = e.target;
onUpdate({ [name]: value });
};
return (
Emotional Wellbeing
);
};
const LifeEventsForm = ({ data, onUpdate }) => {
const handleInputChange = (e) => {
const { name, value } = e.target;
onUpdate({ [name]: value });
};
return (
Life Events
);
};
const renderTabContent = () => {
switch(activeTab) {
case 'personal':
return ;
case 'emotional':
return ;
case 'life-events':
return ;
default:
return null;
}
};
return (
setActiveTab('personal')}
icon="fa-id-card"
/>
setActiveTab('emotional')}
icon="fa-heart"
/>
setActiveTab('life-events')}
icon="fa-calendar"
/>
{renderTabContent()}
);
};
ReactDOM.render(, document.getElementById('root'));