Accordion | React | Anduin Design

AccordionR(
  items = List(
    AccordionR.Item(
      renderHeader = <.div(
        tw.heading3,
        "First item"
      ),
      renderContent = <.div(
        tw.wFull.flex.itemsCenter.justifyCenter,
        ^.height := 100.px,
        "Body of the first item"
      )
    ),
    AccordionR.Item(
      renderHeader = <.div(
        tw.heading3,
        "Second item"
      ),
      renderContent = <.div(
        tw.wFull.flex.itemsCenter.justifyCenter,
        ^.height := 100.px,
        "Body of the second item"
      )
    ),
    AccordionR.Item(
      renderHeader = <.div(
        tw.heading3,
        "Third item"
      ),
      renderContent = <.div(
        tw.wFull.flex.itemsCenter.justifyCenter,
        ^.height := 100.px,
        "Body of the third item"
      )
    )
  )
)()

AccordionR(  items = List(    AccordionR.Item(      renderHeader = <.div(        tw.heading3,        "First item"      ),      renderContent = <.div(        tw.wFull.flex.itemsCenter.justifyCenter,        ^.height := 100.px,        "Body of the first item"      )    ),    AccordionR.Item(      renderHeader = <.div(        tw.heading3,        "Second item"      ),      renderContent = <.div(        tw.wFull.flex.itemsCenter.justifyCenter,        ^.height := 100.px,        "Body of the second item"      )    ),    AccordionR.Item(      renderHeader = <.div(        tw.heading3,        "Third item"      ),      renderContent = <.div(        tw.wFull.flex.itemsCenter.justifyCenter,        ^.height := 100.px,        "Body of the third item"      )    )  ))()