‘options’ => [
‘title’ => ‘Color and steps’,
‘children’ => [
[
‘type’ => ‘component.progress-bar’,
‘options’ => [
‘value’ => [
‘current’ => 5,
‘max’ => 10
],
‘steps’ => 3,
‘color’ => ‘color1’
]]]]];
// Example usage:
// You can access the values like this:
$sectionTitle = $section[‘options’][‘title’];
$progressBar = $section[‘options’][‘children’][0];
$currentValue = $progressBar[‘options’][‘value’][‘current’];
$maxValue = $progressBar[‘options’][‘value’][‘max’];
$steps = $progressBar[‘options’][‘steps’];
$color = $progressBar[‘options’][‘color’];
// Or you could process this configuration to render actual HTML components
function renderSection($sectionConfig) {
$html = ‘
$html .= ‘
‘ . htmlspecialchars($sectionConfig[‘options’][‘title’]) . ‘
‘;
foreach ($sectionConfig[‘options’][‘children’] as $child) {
if ($child[‘type’] === ‘component.progress-bar’) {
$options = $child[‘options’];
$percentage = ($options[‘value’][‘current’] / $options[‘value’][‘max’]) * 100;
$html .= ‘
$html .= ‘
‘;
$html .= ‘
‘;
$html .= ‘
‘;
}
}
$html .= ‘
‘;
return $html;
}
echo renderSection($section);
?>