// Form-based builder panel — accordion sections. const { useState, useRef } = React; function Field({ label, value, onChange, placeholder, type = 'text', textarea, rows = 3 }) { const Cmp = textarea ? 'textarea' : 'input'; return ( ); } function Accordion({ title, count, open, onToggle, children, accent = '#d4b876', tipKey }) { const tip = tipKey ? window.SECTION_TIPS?.[tipKey] : null; return (
{open && (
{tip && (
ⓘ RESUME 101 TIP
{tip}
)} {children}
)}
); } function CreditEditor({ items, setItems, projectLabel = 'Project', roleLabel = 'Role', studioLabel = 'Studio/Network' }) { return (
{items.map((it, i) => (
setItems(items.map((x, j) => j === i ? { ...x, project: v } : x))} /> setItems(items.map((x, j) => j === i ? { ...x, role: v } : x))} /> setItems(items.map((x, j) => j === i ? { ...x, studio: v } : x))} />
))}
); } function TrainingEditor({ items, setItems }) { return (
{items.map((it, i) => (
setItems(items.map((x, j) => j === i ? { ...x, class: v } : x))} /> setItems(items.map((x, j) => j === i ? { ...x, instructor: v } : x))} /> setItems(items.map((x, j) => j === i ? { ...x, location: v } : x))} />
))}
); } function HeadshotUploader({ data, setData }) { const [cropping, setCropping] = useState(false); const [rawSrc, setRawSrc] = useState(null); const [crop, setCrop] = useState({ x: 0.5, y: 0.4, scale: 1 }); const fileRef = useRef(null); function onFile(e) { const f = e.target.files?.[0]; if (!f) return; const reader = new FileReader(); reader.onload = () => { setRawSrc(reader.result); setCrop({ x: 0.5, y: 0.4, scale: 1 }); setCropping(true); }; reader.readAsDataURL(f); } function applyCrop() { const img = new Image(); img.onload = () => { const targetW = 400, targetH = 500; // 8x10 ratio const canvas = document.createElement('canvas'); canvas.width = targetW; canvas.height = targetH; const ctx = canvas.getContext('2d'); // contain by scale const baseScale = Math.max(targetW / img.width, targetH / img.height); const s = baseScale * crop.scale; const drawW = img.width * s, drawH = img.height * s; const cx = crop.x * drawW, cy = crop.y * drawH; const dx = targetW / 2 - cx; const dy = targetH / 2 - cy; ctx.fillStyle = '#fbf8f1'; ctx.fillRect(0, 0, targetW, targetH); ctx.drawImage(img, dx, dy, drawW, drawH); const url = canvas.toDataURL('image/jpeg', 0.9); setData({ ...data, headshot: url }); setCropping(false); setRawSrc(null); }; img.src = rawSrc; } return (
{data.headshot && ( )}
8×10 ratio recommended. You'll be able to crop after upload.
{cropping && rawSrc && ( { setCropping(false); setRawSrc(null); }} onApply={applyCrop} /> )}
); } function CropDialog({ src, crop, setCrop, onCancel, onApply }) { const containerRef = useRef(null); const dragRef = useRef(null); function startDrag(e) { dragRef.current = { startX: e.clientX, startY: e.clientY, cx: crop.x, cy: crop.y }; window.addEventListener('mousemove', onDrag); window.addEventListener('mouseup', endDrag); } function onDrag(e) { if (!dragRef.current || !containerRef.current) return; const rect = containerRef.current.getBoundingClientRect(); const dx = (e.clientX - dragRef.current.startX) / rect.width; const dy = (e.clientY - dragRef.current.startY) / rect.height; setCrop(c => ({ ...c, x: Math.max(0, Math.min(1, dragRef.current.cx - dx)), y: Math.max(0, Math.min(1, dragRef.current.cy - dy)) })); } function endDrag() { dragRef.current = null; window.removeEventListener('mousemove', onDrag); window.removeEventListener('mouseup', endDrag); } return (
Crop Headshot
Drag to reposition. Slide to zoom. Industry standard is 8×10 portrait.
ZOOM setCrop(c => ({ ...c, scale: parseFloat(e.target.value) }))} style={{ flex: 1, accentColor: '#d4b876' }} />
); } function BuilderPanel({ data, setData }) { const [open, setOpen] = useState({ basics: true, reps: false, headshot: false, tv: false, film: false, theatre: false, commercial: false, newMedia: false, voiceover: false, training: false, skills: false }); const t = (k) => () => setOpen(o => ({ ...o, [k]: !o[k] })); const upd = (k, v) => setData({ ...data, [k]: v }); const updActor = (k, v) => setData({ ...data, actor: { ...data.actor, [k]: v } }); const UNION = ["Non-Union", "SAG-Eligible", "SAG-AFTRA", "AEA", "Financial Core"]; return (
updActor('name', v)} placeholder="e.g. Billy Boyson" />
Union Status
{UNION.map(u => ( ))}
updActor('height', v)} placeholder="4'8"" /> updActor('age', v)} placeholder="8–11" /> updActor('hair', v)} placeholder="Brown" /> updActor('eyes', v)} placeholder="Brown" />
{data.reps.map((r, i) => (
Type
{['Agency', 'Manager', 'Guardian'].map(t => ( ))}
upd('reps', data.reps.map((x, j) => j === i ? { ...x, name: v } : x))} /> upd('reps', data.reps.map((x, j) => j === i ? { ...x, location: v } : x))} /> upd('reps', data.reps.map((x, j) => j === i ? { ...x, phone: v } : x))} /> upd('reps', data.reps.map((x, j) => j === i ? { ...x, email: v } : x))} />
))} {data.reps.length < 3 && ( )} upd('television', v)} roleLabel="Role (Series Regular, Guest Star…)" /> upd('film', v)} roleLabel="Role (Lead, Supporting…)" studioLabel="Studio / Director" /> upd('theatre', v)} projectLabel="Production" roleLabel="Character" studioLabel="Theater Company" />
Industry standard: list "*Conflicts available upon request" rather than specific brands.
upd('commercial', v)} /> upd('newMedia', v)} studioLabel="Platform" /> upd('voiceover', v)} studioLabel="Studio / Network" /> upd('training', v)} /> upd('skills', v)} textarea rows={6} />
Tip: include languages, dialects, sports (with years), instruments, and any work permits or accounts (Coogan, etc.)
); } Object.assign(window, { BuilderPanel });