Update ProfileTab.jsx

Key Changes Applied:

TagInput Component: Added for cleaner management of comma-separated lists (Skills, Certifications, Languages).
Enhanced Styling: Inputs now have nicer borders, background colors, and focus states.
Projects Section: Full support for adding, editing, and removing projects with TagInput for technologies.
Education Section: Updated to match the new styling and structure.

src/components/ProfileTab.jsx

@@ -1,12 +1,93 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 
+// --- Helper Component for Tag Inputs ---
+const TagInput = ({ name, value, onChange, placeholder, isEditing }) => {
+    const [inputValue, setInputValue] = useState("");
+
+    // Convert string "A, B, C" to array ["A", "B", "C"]
+    const tags = value ? value.split(',').map(s => s.trim()).filter(Boolean) : [];
+
+    const handleAddParam = (val) => {
+        const trimmed = val.trim();
+        if (trimmed && !tags.includes(trimmed)) {
+            const newTags = [...tags, trimmed];
+            onChange({ target: { name, value: newTags.join(', ') } });
+        }
+        setInputValue("");
+    };
+
+    const handleKeyDown = (e) => {
+        if (e.key === 'Enter' || e.key === ',') {
+            e.preventDefault();
+            handleAddParam(inputValue);
+        } else if (e.key === 'Backspace' && !inputValue && tags.length > 0) {
+            handleRemoveTag(tags.length - 1);
+        }
+    };
+
+    const handleRemoveTag = (index) => {
+        const newTags = tags.filter((_, i) => i !== index);
+        onChange({ target: { name, value: newTags.join(', ') } });
+    };
+
+    return (
+        <div style={{
+            display: 'flex', flexWrap: 'wrap', gap: '0.5rem',
+            padding: '0.5rem', borderRadius: '0.5rem',
+            border: isEditing ? '1px solid rgba(251, 191, 36, 0.3)' : 'none',
+            backgroundColor: isEditing ? 'rgba(255,255,255,0.05)' : 'transparent',
+            minHeight: '2.5rem'
+        }}>
+            {tags.map((tag, index) => (
+                <span key={index} style={{
+                    backgroundColor: 'rgba(251, 191, 36, 0.15)',
+                    color: '#FCD34D',
+                    padding: '0.25rem 0.75rem',
+                    borderRadius: '9999px',
+                    fontSize: '0.875rem',
+                    display: 'flex', alignItems: 'center', gap: '0.5rem'
+                }}>
+                    {tag}
+                    {isEditing && (
+                        <button
+                            onClick={() => handleRemoveTag(index)}
+                            style={{ background: 'none', border: 'none', color: '#FCD34D', cursor: 'pointer', fontSize: '1rem', padding: 0 }}
+                        >
+                            ×
+                        </button>
+                    )}
+                </span>
+            ))}
+
+            {isEditing && (
+                <input
+                    type="text"
+                    value={inputValue}
+                    onChange={(e) => setInputValue(e.target.value)}
+                    onKeyDown={handleKeyDown}
+                    onBlur={() => handleAddParam(inputValue)} // Add on blur too
+                    placeholder={tags.length === 0 ? placeholder : ""}
+                    style={{
+                        background: 'transparent', border: 'none', color: 'white',
+                        outline: 'none', flex: 1, minWidth: '100px'
+                    }}
+                />
+            )}
+            {!isEditing && tags.length === 0 && <span style={{ color: '#6B7280' }}>Not set</span>}
+        </div>
+    );
+};
+
+
 const ProfileTab = ({
     profileData,
     isEditing,
     handleProfileChange,
     handleExperienceChange,
     handleAddExperience,
+    handleAddEducation,
+    handleEducationChange,
     showFullProfile,
 }) => {
     if (!profileData) return null;
@@ -16,10 +97,8 @@ const ProfileTab = ({
         border: '1px solid rgba(251, 191, 36, 0.3)',
         backgroundColor: 'rgba(255,255,255,0.1)', color: 'white'
     };
-    
+
     const labelStyles = { display: 'block', marginBottom: '0.5rem', color: '#d1d5db' };
-    
-    // --- Styles for checkboxes ---
     const checkboxLabelStyles = { display: 'flex', alignItems: 'center', gap: '0.5rem', color: '#d1d5db' };
     const checkboxStyles = { width: '1.15em', height: '1.15em', accentColor: '#FBBF24' };
 
@@ -29,18 +108,18 @@ const ProfileTab = ({
             <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1.5rem' }}>
                 <div>
                     <label style={labelStyles}>Full Name</label>
-                    {isEditing ? ( <input type="text" name="full_name" value={profileData?.full_name || ''} onChange={handleProfileChange} style={inputStyles} placeholder="e.g., John Doe" /> ) : ( <p>{profileData?.full_name || 'Not set'}</p> )}
+                    {isEditing ? (<input type="text" name="full_name" value={profileData?.full_name || ''} onChange={handleProfileChange} style={inputStyles} placeholder="e.g., John Doe" />) : (<p>{profileData?.full_name || 'Not set'}</p>)}
                 </div>
                 <div>
                     <label style={labelStyles}>Headline</label>
-                    {isEditing ? ( <input type="text" name="headline" value={profileData?.headline || ''} onChange={handleProfileChange} style={inputStyles} placeholder="e.g., Senior Software Engineer"/> ) : ( <p>{profileData?.headline || 'Not set'}</p> )}
+                    {isEditing ? (<input type="text" name="headline" value={profileData?.headline || ''} onChange={handleProfileChange} style={inputStyles} placeholder="e.g., Senior Software Engineer" />) : (<p>{profileData?.headline || 'Not set'}</p>)}
                 </div>
             </div>
 
             {/* Summary */}
             <div>
                 <label style={labelStyles}>Summary</label>
-                {isEditing ? ( <textarea name="summary" value={profileData?.summary || ''} onChange={handleProfileChange} rows="4" style={inputStyles} placeholder="Tell us about yourself..."/> ) : ( <p>{profileData?.summary || 'Not set'}</p> )}
+                {isEditing ? (<textarea name="summary" value={profileData?.summary || ''} onChange={handleProfileChange} rows="4" style={inputStyles} placeholder="Tell us about yourself..." />) : (<p>{profileData?.summary || 'Not set'}</p>)}
             </div>
 
             {/* Extended Profile Fields */}
@@ -50,54 +129,83 @@ const ProfileTab = ({
                         <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(250px, 1fr))', gap: '1.5rem', marginTop: '1.5rem' }}>
                             <div>
                                 <label style={labelStyles}>Email</label>
-                                {isEditing ? ( <input type="email" name="email" value={profileData?.email || ''} onChange={handleProfileChange} style={inputStyles} /> ) : ( <p>{profileData?.email || 'Not set'}</p> )}
+                                {isEditing ? (<input type="email" name="email" value={profileData?.email || ''} onChange={handleProfileChange} style={inputStyles} />) : (<p>{profileData?.email || 'Not set'}</p>)}
                             </div>
                             <div>
                                 <label style={labelStyles}>Phone</label>
-                                {isEditing ? ( <input type="tel" name="phone" value={profileData?.phone || ''} onChange={handleProfileChange} style={inputStyles} /> ) : ( <p>{profileData?.phone || 'Not set'}</p> )}
+                                {isEditing ? (<input type="tel" name="phone" value={profileData?.phone || ''} onChange={handleProfileChange} style={inputStyles} />) : (<p>{profileData?.phone || 'Not set'}</p>)}
                             </div>
-                             <div>
+                            <div>
                                 <label style={labelStyles}>Address</label>
-                                {isEditing ? ( <input type="text" name="address" value={profileData?.address || ''} onChange={handleProfileChange} style={inputStyles} /> ) : ( <p>{profileData?.address || 'Not set'}</p> )}
+                                {isEditing ? (<input type="text" name="address" value={profileData?.address || ''} onChange={handleProfileChange} style={inputStyles} />) : (<p>{profileData?.address || 'Not set'}</p>)}
                             </div>
                             <div>
                                 <label style={labelStyles}>Current Position</label>
-                                {isEditing ? ( <input type="text" name="current_position" value={profileData?.current_position || ''} onChange={handleProfileChange} style={inputStyles} /> ) : ( <p>{profileData?.current_position || 'Not set'}</p> )}
+                                {isEditing ? (<input type="text" name="current_position" value={profileData?.current_position || ''} onChange={handleProfileChange} style={inputStyles} />) : (<p>{profileData?.current_position || 'Not set'}</p>)}
                             </div>
                             <div>
                                 <label style={labelStyles}>Years of Experience</label>
-                                {isEditing ? ( <input type="text" name="experience_years" value={profileData?.experience_years || ''} onChange={handleProfileChange} style={inputStyles} /> ) : ( <p>{profileData?.experience_years || 'Not set'}</p> )}
+                                {isEditing ? (<input type="text" name="experience_years" value={profileData?.experience_years || ''} onChange={handleProfileChange} style={inputStyles} />) : (<p>{profileData?.experience_years || 'Not set'}</p>)}
                             </div>
                             <div>
                                 <label style={labelStyles}>Desired Salary</label>
-                                {isEditing ? ( <input type="text" name="desired_salary" value={profileData?.desired_salary || ''} onChange={handleProfileChange} style={inputStyles} /> ) : ( <p>{profileData?.desired_salary || 'Not set'}</p> )}
+                                {isEditing ? (<input type="text" name="desired_salary" value={profileData?.desired_salary || ''} onChange={handleProfileChange} style={inputStyles} />) : (<p>{profileData?.desired_salary || 'Not set'}</p>)}
                             </div>
                             <div>
                                 <label style={labelStyles}>LinkedIn</label>
-                                {isEditing ? ( <input type="url" name="linkedin" value={profileData?.linkedin || ''} onChange={handleProfileChange} style={inputStyles} /> ) : ( <a href={profileData?.linkedin || '#'} target="_blank" rel="noreferrer" style={{color: '#93C5FD'}}>{profileData?.linkedin || 'Not set'}</a> )}
+                                {isEditing ? (<input type="url" name="linkedin" value={profileData?.linkedin || ''} onChange={handleProfileChange} style={inputStyles} />) : (<a href={profileData?.linkedin || '#'} target="_blank" rel="noreferrer" style={{ color: '#93C5FD' }}>{profileData?.linkedin || 'Not set'}</a>)}
                             </div>
                             <div>
                                 <label style={labelStyles}>GitHub</label>
-                                {isEditing ? ( <input type="url" name="github" value={profileData?.github || ''} onChange={handleProfileChange} style={inputStyles} /> ) : ( <a href={profileData?.github || '#'} target="_blank" rel="noreferrer" style={{color: '#93C5FD'}}>{profileData?.github || 'Not set'}</a> )}
+                                {isEditing ? (<input type="url" name="github" value={profileData?.github || ''} onChange={handleProfileChange} style={inputStyles} />) : (<a href={profileData?.github || '#'} target="_blank" rel="noreferrer" style={{ color: '#93C5FD' }}>{profileData?.github || 'Not set'}</a>)}
                             </div>
-                             <div>
+                            <div>
                                 <label style={labelStyles}>Portfolio</label>
-                                {isEditing ? ( <input type="url" name="portfolio" value={profileData?.portfolio || ''} onChange={handleProfileChange} style={inputStyles} /> ) : ( <a href={profileData?.portfolio || '#'} target="_blank" rel="noreferrer" style={{color: '#93C5FD'}}>{profileData?.portfolio || 'Not set'}</a> )}
+                                {isEditing ? (<input type="url" name="portfolio" value={profileData?.portfolio || ''} onChange={handleProfileChange} style={inputStyles} />) : (<a href={profileData?.portfolio || '#'} target="_blank" rel="noreferrer" style={{ color: '#93C5FD' }}>{profileData?.portfolio || 'Not set'}</a>)}
                             </div>
-                             <div style={{gridColumn: 'span 2'}}>
+
+                            {/* TAG INPUTS */}
+                            <div style={{ gridColumn: 'span 2' }}>
                                 <label style={labelStyles}>Technical Skills</label>
-                                {isEditing ? ( <textarea name="technical_skills" value={profileData?.technical_skills || ''} onChange={handleProfileChange} rows="3" style={inputStyles} /> ) : ( <p>{profileData?.technical_skills || 'Not set'}</p> )}
-                            </div>
-                             <div style={{ alignSelf: 'center' }}>
-                                 {isEditing ? (
-                                     <label style={checkboxLabelStyles}><input type="checkbox" name="willing_to_relocate" checked={!!profileData?.willing_to_relocate} onChange={handleProfileChange} style={checkboxStyles}/> Willing to Relocate</label>
-                                 ) : ( <p>{profileData?.willing_to_relocate ? 'Willing to relocate' : 'Not willing to relocate'}</p> )}
-                             </div>
-                             <div style={{ alignSelf: 'center' }}>
-                                 {isEditing ? (
-                                     <label style={checkboxLabelStyles}><input type="checkbox" name="available_remote" checked={!!profileData?.available_remote} onChange={handleProfileChange} style={checkboxStyles}/> Available for Remote Work</label>
-                                 ) : ( <p>{profileData?.available_remote ? 'Available for remote' : 'Not available for remote'}</p> )}
-                             </div>
+                                <TagInput
+                                    name="technical_skills"
+                                    value={profileData?.technical_skills}
+                                    onChange={handleProfileChange}
+                                    isEditing={isEditing}
+                                    placeholder="Add skill (press Enter)..."
+                                />
+                            </div>
+                            <div style={{ gridColumn: 'span 2' }}>
+                                <label style={labelStyles}>Certifications</label>
+                                <TagInput
+                                    name="certifications"
+                                    value={profileData?.certifications}
+                                    onChange={handleProfileChange}
+                                    isEditing={isEditing}
+                                    placeholder="Add certification (press Enter)..."
+                                />
+                            </div>
+                            <div style={{ gridColumn: 'span 2' }}>
+                                <label style={labelStyles}>Languages</label>
+                                <TagInput
+                                    name="languages"
+                                    value={profileData?.languages}
+                                    onChange={handleProfileChange}
+                                    isEditing={isEditing}
+                                    placeholder="Add language (press Enter)..."
+                                />
+                            </div>
+
+                            <div style={{ alignSelf: 'center' }}>
+                                {isEditing ? (
+                                    <label style={checkboxLabelStyles}><input type="checkbox" name="willing_to_relocate" checked={!!profileData?.willing_to_relocate} onChange={handleProfileChange} style={checkboxStyles} /> Willing to Relocate</label>
+                                ) : (<p>{profileData?.willing_to_relocate ? 'Willing to relocate' : 'Not willing to relocate'}</p>)}
+                            </div>
+                            <div style={{ alignSelf: 'center' }}>
+                                {isEditing ? (
+                                    <label style={checkboxLabelStyles}><input type="checkbox" name="available_remote" checked={!!profileData?.available_remote} onChange={handleProfileChange} style={checkboxStyles} /> Available for Remote Work</label>
+                                ) : (<p>{profileData?.available_remote ? 'Available for remote' : 'Not available for remote'}</p>)}
+                            </div>
                         </div>
                     </motion.div>
                 )}
@@ -115,15 +223,15 @@ const ProfileTab = ({
                                 <input type="text" name="years" value={exp.years || ''} onChange={(e) => handleExperienceChange(index, e)} placeholder="Years" style={inputStyles} />
                             </div>
                         ))}
-                        <button 
-                            onClick={handleAddExperience} 
-                            style={{ 
-                                backgroundColor: 'rgba(251, 191, 36, 0.2)', 
-                                color: '#FCD34D', 
-                                padding: '0.5rem 1rem', 
-                                borderRadius: '0.5rem', 
-                                border: 'none', 
-                                cursor: 'pointer' 
+                        <button
+                            onClick={handleAddExperience}
+                            style={{
+                                backgroundColor: 'rgba(251, 191, 36, 0.2)',
+                                color: '#FCD34D',
+                                padding: '0.5rem 1rem',
+                                borderRadius: '0.5rem',
+                                border: 'none',
+                                cursor: 'pointer'
                             }}
                         >
                             + Add More Experience
@@ -133,7 +241,7 @@ const ProfileTab = ({
                     <div>
                         {profileData?.work_experience && profileData.work_experience.length > 0 ? (
                             profileData.work_experience.map((exp, index) => (
-                                <div key={exp.id || index} style={{marginBottom: '1rem'}}>
+                                <div key={exp.id || index} style={{ marginBottom: '1rem' }}>
                                     <p style={{ fontWeight: 'bold', margin: 0 }}>{exp.role}</p>
                                     <p style={{ color: '#d1d5db', margin: 0 }}>{exp.company} • {exp.years} years</p>
                                 </div>
@@ -144,8 +252,124 @@ const ProfileTab = ({
                     </div>
                 )}
             </div>
+
+            {/* Education Section */}
+            <div>
+                <h3 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1.5rem', marginTop: '1.5rem' }}>Education</h3>
+                {isEditing ? (
+                    <>
+                        {(profileData?.education || []).map((edu, index) => (
+                            <div key={edu.id || index} style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(180px, 1fr))', gap: '1rem', marginBottom: '1rem' }}>
+                                <input type="text" name="course" value={edu.course || ''} onChange={(e) => handleEducationChange(index, e)} placeholder="Course/Degree" style={inputStyles} />
+                                <input type="text" name="institution" value={edu.institution || ''} onChange={(e) => handleEducationChange(index, e)} placeholder="Institution" style={inputStyles} />
+                                <input type="text" name="year" value={edu.year || ''} onChange={(e) => handleEducationChange(index, e)} placeholder="Year" style={inputStyles} />
+                            </div>
+                        ))}
+                        <button
+                            onClick={handleAddEducation}
+                            style={{
+                                backgroundColor: 'rgba(251, 191, 36, 0.2)',
+                                color: '#FCD34D',
+                                padding: '0.5rem 1rem',
+                                borderRadius: '0.5rem',
+                                border: 'none',
+                                cursor: 'pointer'
+                            }}
+                        >
+                            + Add More Education
+                        </button>
+                    </>
+                ) : (
+                    <div>
+                        {profileData?.education && profileData.education.length > 0 ? (
+                            profileData.education.map((edu, index) => (
+                                <div key={edu.id || index} style={{ marginBottom: '1rem' }}>
+                                    <p style={{ fontWeight: 'bold', margin: 0 }}>{edu.course}</p>
+                                    <p style={{ color: '#d1d5db', margin: 0 }}>{edu.institution} • {edu.year}</p>
+                                </div>
+                            ))
+                        ) : (
+                            <p>No education added.</p>
+                        )}
+                    </div>
+                )}
+            </div>
+
+            {/* Projects Section */}
+            <div>
+                <h3 style={{ fontSize: '1.25rem', fontWeight: 'bold', marginBottom: '1.5rem', marginTop: '1.5rem' }}>Projects</h3>
+                {isEditing ? (
+                    <>
+                        {(profileData?.projects || []).map((proj, index) => (
+                            <div key={index} style={{ marginBottom: '1.5rem', padding: '1rem', backgroundColor: 'rgba(255,255,255,0.05)', borderRadius: '0.5rem' }}>
+                                <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: '0.5rem', marginBottom: '0.5rem' }}>
+                                    <input type="text" name="title" value={proj.title || ''} onChange={(e) => {
+                                        const newProjects = [...(profileData.projects || [])];
+                                        newProjects[index] = { ...newProjects[index], title: e.target.value };
+                                        handleProfileChange({ target: { name: 'projects', value: newProjects } });
+                                    }} placeholder="Project Title" style={{ ...inputStyles, marginBottom: '0.5rem' }} />
+
+                                    <textarea name="description" value={proj.description || ''} onChange={(e) => {
+                                        const newProjects = [...(profileData.projects || [])];
+                                        newProjects[index] = { ...newProjects[index], description: e.target.value };
+                                        handleProfileChange({ target: { name: 'projects', value: newProjects } });
+                                    }} placeholder="Description" rows="2" style={{ ...inputStyles, marginBottom: '0.5rem' }} />
+
+                                    <TagInput
+                                        name={`projects[${index}].technologies_used`}
+                                        value={Array.isArray(proj.technologies_used) ? proj.technologies_used.join(', ') : (proj.technologies_used || '')}
+                                        onChange={(e) => {
+                                            const newProjects = [...(profileData.projects || [])];
+                                            const val = e.target.value;
+                                            newProjects[index] = { ...newProjects[index], technologies_used: val.split(',').map(s => s.trim()).filter(Boolean) };
+                                            handleProfileChange({ target: { name: 'projects', value: newProjects } });
+                                        }}
+                                        isEditing={true}
+                                        placeholder="Technologies (comma separated)..."
+                                    />
+                                </div>
+                                <button onClick={() => {
+                                    const newProjects = profileData.projects.filter((_, i) => i !== index);
+                                    handleProfileChange({ target: { name: 'projects', value: newProjects } });
+                                }} style={{ color: '#EF4444', background: 'none', border: 'none', cursor: 'pointer', fontSize: '0.875rem' }}>Remove Project</button>
+                            </div>
+                        ))}
+                        <button
+                            onClick={() => {
+                                const newProjects = [...(profileData.projects || []), { title: '', technologies_used: [], description: '' }];
+                                handleProfileChange({ target: { name: 'projects', value: newProjects } });
+                            }}
+                            style={{
+                                backgroundColor: 'rgba(251, 191, 36, 0.2)',
+                                color: '#FCD34D',
+                                padding: '0.5rem 1rem',
+                                borderRadius: '0.5rem',
+                                border: 'none',
+                                cursor: 'pointer'
+                            }}
+                        >
+                            + Add Project
+                        </button>
+                    </>
+                ) : (
+                    <div>
+                        {profileData?.projects && profileData.projects.length > 0 ? (
+                            profileData.projects.map((proj, index) => (
+                                <div key={index} style={{ marginBottom: '1.5rem' }}>
+                                    <p style={{ fontWeight: 'bold', margin: 0, color: '#FCD34D' }}>{proj.title}</p>
+                                    <p style={{ fontSize: '0.875rem', color: '#9CA3AF', margin: '0.25rem 0' }}>
+                                        {Array.isArray(proj.technologies_used) ? proj.technologies_used.join(', ') : proj.technologies_used}
+                                    </p>
+                                    <p style={{ color: '#d1d5db', margin: 0 }}>{proj.description}</p>
+                                </div>
+                            ))
+                        ) : (
+                            <p>No projects added.</p>
+                        )}
+                    </div>
+                )}
+            </div>
         </div>
     );
 };
-
-export default ProfileTab;
+export default ProfileTab;