Spaces:
Running
Running
File size: 3,465 Bytes
ba95018 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 | import { useState } from 'react';
import { useForm } from '../../context/FormContext';
import FillBlank from '../fields/FillBlank';
import CheckboxGroup from '../fields/CheckboxGroup';
import ExerciseList from '../fields/ExerciseList';
import TextInput from '../fields/TextInput';
import StaticText from '../fields/StaticText';
import { ChevronDown, ChevronRight } from 'lucide-react';
import * as Icons from 'lucide-react';
function getIcon(name, size = 20) {
const Icon = Icons[name];
return Icon ? <Icon size={size} /> : null;
}
function FieldRenderer({ field, sectionId }) {
switch (field.type) {
case 'fill-blank':
return <FillBlank field={field} sectionId={sectionId} />;
case 'checkbox-group':
return <CheckboxGroup field={field} sectionId={sectionId} />;
case 'exercise-list':
return <ExerciseList field={field} sectionId={sectionId} />;
case 'text':
case 'number':
return <TextInput field={field} sectionId={sectionId} />;
case 'static':
return <StaticText field={field} />;
default:
return null;
}
}
export default function SectionRenderer({ section }) {
const { formState, toggleSection } = useForm();
const isEnabled = formState.enabledSections[section.id] !== false;
const [collapsedSubs, setCollapsedSubs] = useState({});
const toggleSubsection = (subId) => {
setCollapsedSubs(prev => ({ ...prev, [subId]: !prev[subId] }));
};
return (
<div className="section" id={`section-${section.id}`}>
<div className="section__header">
<div className="section__header-icon">
{getIcon(section.icon, 20)}
</div>
<h2 className="section__title">{section.title}</h2>
{section.cptCode && (
<span className="section__cpt">{section.cptCode}</span>
)}
<div className="section__toggle">
<div
className={`toggle-switch ${isEnabled ? 'toggle-switch--active' : ''}`}
onClick={() => toggleSection(section.id)}
role="switch"
aria-checked={isEnabled}
title={isEnabled ? 'Disable section' : 'Enable section'}
/>
</div>
</div>
<div className={!isEnabled ? 'section-disabled' : ''}>
{section.subsections.map(sub => {
const isCollapsed = collapsedSubs[sub.id];
return (
<div className="subsection" key={sub.id} id={`subsection-${sub.id}`}>
<button
className="collapsible-trigger"
onClick={() => toggleSubsection(sub.id)}
type="button"
>
<span className="subsection__title" style={{ margin: 0 }}>
<span className="subsection__title-dot" />
{sub.title}
</span>
<span className={`collapsible-trigger__icon ${!isCollapsed ? 'collapsible-trigger__icon--open' : ''}`}>
<ChevronDown size={16} />
</span>
</button>
{!isCollapsed && (
<div style={{ paddingTop: 'var(--space-3)' }}>
{sub.fields.map(field => (
<FieldRenderer
key={field.id}
field={field}
sectionId={section.id}
/>
))}
</div>
)}
</div>
);
})}
</div>
</div>
);
}
|