import { useState } from "react"; import { updateProfile } from "../api/client"; export default function EditProfileModal({ profile, onClose, onUpdate }) { const [bio, setBio] = useState(profile?.bio || ""); const [website, setWebsite] = useState(profile?.website || ""); const [links, setLinks] = useState(profile?.links || []); const [newLink, setNewLink] = useState(""); const [saving, setSaving] = useState(false); const [error, setError] = useState(null); const handleSubmit = async (e) => { e.preventDefault(); setSaving(true); setError(null); try { await updateProfile({ bio, website, links }); onUpdate(); onClose(); } catch (err) { setError(err.message); } finally { setSaving(false); } }; const addLink = () => { if (!newLink) return; if (!links.includes(newLink)) { setLinks([...links, newLink]); setNewLink(""); setError(null); } }; const removeLink = (index) => { setLinks(links.filter((_, i) => i !== index)); }; return (

e.stopPropagation()}>

Edit Profile

{error &&

{error}

}

Bio

setBio(e.target.value)}
              placeholder="Tell us about yourself..."
              rows={4}
              maxLength={5000}
            />
            <div className="char-count">{bio.length}/5000</div>
          </div>

<div className="form-group">
            <label>Website</label>
            <input
              type="url"
              className="input"
              value={website}
              onChange={(e) => setWebsite(e.target.value)}
              placeholder="https://example.com"
              maxLength={1000}
            />
          </div>

<div className="form-group">
            <label>Links</label>
            <div className="links-input-group">
              <input
                type="url"
                className="input"
                value={newLink}
                onChange={(e) => setNewLink(e.target.value)}
                placeholder="Add a link (e.g. GitHub, LinkedIn)..."
                onKeyDown={(e) =>
                  e.key === "Enter" && (e.preventDefault(), addLink())
                }
              />
              <button
                type="button"
                className="btn btn-secondary"
                onClick={addLink}
              >
                Add
              </button>
            </div>
            <ul className="links-list">
              {links.map((link, i) => (
                <li key={i} className="link-item">
                  <span>{link}</span>
                  <button
                    type="button"
                    className="btn-icon-sm"
                    onClick={() => removeLink(i)}
                  >
                    ×
                  </button>
                </li>
              ))}
            </ul>
          </div>

<div className="modal-actions">
            <button
              type="button"
              className="btn btn-secondary"
              onClick={onClose}
              disabled={saving}
            >
              Cancel
            </button>
            <button type="submit" className="btn btn-primary" disabled={saving}>
              {saving ? "Saving..." : "Save Profile"}
            </button>
          </div>
        </form>
      </div>
    </div>
  );
}
</article></body></html>