58 lines
1.9 KiB
JavaScript
58 lines
1.9 KiB
JavaScript
// src/components/EditableCareerGoals.js
|
|
import React, { useState } from 'react';
|
|
import { Button } from './ui/button.js';
|
|
import { Pencil, Save } from 'lucide-react';
|
|
import authFetch from '../utils/authFetch.js';
|
|
|
|
export default function EditableCareerGoals({ initialGoals='', careerProfileId, onSaved }) {
|
|
const [editing , setEditing ] = useState(false);
|
|
const [draftText, setDraftText] = useState(initialGoals);
|
|
const [saving , setSaving ] = useState(false);
|
|
|
|
async function save() {
|
|
setSaving(true);
|
|
const res = await authFetch(`/api/premium/career-profile/${careerProfileId}/goals`, {
|
|
method : 'PUT',
|
|
headers: { 'Content-Type':'application/json' },
|
|
body : JSON.stringify({ career_goals: draftText })
|
|
});
|
|
if (res.ok) {
|
|
onSaved(draftText);
|
|
setEditing(false);
|
|
}
|
|
setSaving(false);
|
|
}
|
|
|
|
return (
|
|
<div className="bg-white p-4 rounded shadow">
|
|
<div className="flex items-start justify-between">
|
|
<h3 className="text-lg font-semibold">Your Career Goals</h3>
|
|
{!editing && (
|
|
<Button size="icon" variant="ghost" onClick={() => setEditing(true)}>
|
|
<Pencil className="w-4 h-4" />
|
|
</Button>
|
|
)}
|
|
</div>
|
|
|
|
{editing ? (
|
|
<>
|
|
<textarea
|
|
value={draftText}
|
|
onChange={e => setDraftText(e.target.value)}
|
|
rows={4}
|
|
className="w-full border rounded p-2 mt-2"
|
|
placeholder="Describe your short- and long-term goals…"
|
|
/>
|
|
<Button onClick={save} disabled={saving} className="mt-2">
|
|
{saving ? 'Saving…' : <><Save className="w-4 h-4 mr-1" /> Save</>}
|
|
</Button>
|
|
</>
|
|
) : (
|
|
<p className="mt-2 whitespace-pre-wrap text-gray-700">
|
|
{initialGoals || <span className="italic text-gray-400">No goals entered yet.</span>}
|
|
</p>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|