permalinkRadix UI collapsible

spago install radix-ui
npm install @radix-ui/react-collapsible

Collapsible.root {}
  [ Collapsible.trigger {} (button {} "Click to (un)collapse")
  , Collapsible.content {} (text "This can be collapsed")
  ]

module Example.RadixUI.Collapsible where

import Alethic.Prelude.View

import Beta.DOM (button, div, span)
import RadixUI.Collapsible as Collapsible
import React.Basic.Hooks as React
import React.Icons (icon)
import React.Icons.Rx (rxCross2, rxRowSpacing)

mkCollapsible :: Effect (ReactComponent {})
mkCollapsible = React.reactComponent "ExampleCollapsible" \{} -> React.do
  open /\ setOpen <- React.useState false
  pure $ Collapsible.root
    { className: "w-[300px]", open, onOpenChange: setOpen <<< const }
    [ titleBar
        [ summary "@peduarte starred 3 repositories"
        , Collapsible.trigger { asChild: true } $
            toggleButton open setOpen
        ]
    , block "@radix-ui/primitives"
    , Collapsible.content {}
        [ block "@radix-ui/colors"
        , block "@stitches/react"
        ]
    ]
  where
  titleBar = div { className: "flex items-center justify-between" }

  summary = span { className: "text-white text-[15px] leading-[25px]" }

  toggleButton open setOpen =
    button
      { className: "rounded-full h-[25px] w-[25px] inline-flex items-center justify-center text-violet11 shadow-[0_2px_10px] shadow-blackA7 outline-none data-[state=closed]:bg-white data-[state=open]:bg-violet3 hover:bg-violet3 focus:shadow-[0_0_0_2px] focus:shadow-black"
      , onClick: handler_ $ setOpen not
      }
      (icon (if open then rxCross2 else rxRowSpacing) { size: "15px" })

  block name =
    div
      { className: "bg-white rounded my-[10px] p-[10px] shadow-[0_2px_10px] shadow-blackA7"
      } $
      span { className: "text-violet11 text-[15px] leading-[25px]" } name