Spaces:
Running
Running
File size: 1,389 Bytes
d0f2c73 d6c9678 d0f2c73 d6c9678 d0f2c73 d6c9678 d0f2c73 d6c9678 d0f2c73 d6c9678 d0f2c73 d6c9678 | 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 | import React, { useState } from 'react'
export default function SectionBlock({
step,
title,
subtitle,
aside,
children,
collapsible = true,
defaultOpen = true,
}) {
const [open, setOpen] = useState(defaultOpen)
return (
<section
className={`workflow-section${collapsible && !open ? ' is-collapsed' : ''}`}
style={{ '--section-order': Number(step) || 1 }}
data-section-step={String(step)}
>
<header className="section-head">
<span className="section-index">{step}</span>
<div className="section-title-wrap">
<h3>{title}</h3>
{subtitle ? <p>{subtitle}</p> : null}
</div>
<div className="section-head-actions">
{aside ? <div className="section-head-aside">{aside}</div> : null}
{collapsible ? (
<button
type="button"
className={`section-collapse-toggle${open ? ' is-open' : ''}`}
onClick={() => setOpen((current) => !current)}
aria-expanded={open}
title={open ? 'Recolher seção' : 'Expandir seção'}
>
<span className="section-collapse-toggle-icon" aria-hidden="true">▾</span>
</button>
) : null}
</div>
</header>
{!collapsible || open ? <div className="section-body">{children}</div> : null}
</section>
)
}
|