Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071import React from "react";import { Plus, Trash } from "@phosphor-icons/react";import { IconButton } from "./ui.jsx";
export function SourceEditor({ sources, onChange }) { function update(index, field, value) { onChange( sources.map((source, position) => position === index ? { ...source, [field]: value } : source, ), ); } return ( <div className="source-editor"> {sources.map((source, index) => ( <div className="source-editor-row" key={index}> <div className="entity-heading"> <span className="eyebrow">Source {index + 1}</span> <IconButton label={`Remove source ${index + 1} from draft`} onClick={() => onChange(sources.filter((_, position) => position !== index)) } > <Trash size={16} /> </IconButton> </div> <label> Source title <input value={source.title} required onChange={(event) => update(index, "title", event.target.value)} /> </label> <label> Source URL <input type="url" value={source.url} required onChange={(event) => update(index, "url", event.target.value)} /> </label> <label> Saved excerpt <textarea rows={3} value={source.excerpt || ""} onChange={(event) => update(index, "excerpt", event.target.value)} /> </label> </div> ))} <button type="button" className="text-button" disabled={sources.length >= 100} onClick={() => onChange([...sources, { title: "", url: "", excerpt: "" }]) } > <Plus size={16} /> Add source </button> <p className="muted small"> Changes to sources are applied when you save the article. </p> </div> );}