Tab as a component... Working tab

src/Tab.purs

+module Tab where
+
+import Data.Array (fold)
+import Data.Lens (Lens', Prism', over, view)
+import Data.List (List, mapWithIndex, toUnfoldable)
+import Data.Tuple (Tuple(..))
+import Prelude hiding (div)
+import React (ReactElement)
+import React.DOM (a, div, nav, text)
+import React.DOM.Props (className, onClick)
+import Thermite (PerformAction, Render, Spec, _render, cotransform, focus, simpleSpec, withState)
+
+type State = Int
+
+data Action = ChangeTab Int
+
+tabs :: forall eff state props action . Lens' state State -> Prism' action Action -> List (Tuple String (Spec eff state props action)) -> Spec eff state props action
+tabs l p ls = withState \st ->
+  fold
+  [ focus l p $ simpleSpec performAction (render (activeTab st) ls)
+  , wrapper $ fold $ mapWithIndex (tab (activeTab st)) ls
+  ]
+  where
+    activeTab = view l
+    wrapper = over _render \render d p s c ->
+      [div [className "tab-content"] $ render d p s c]
+
+tab :: forall eff state props action. Int -> Int -> Tuple String (Spec eff state props action) -> Spec eff state props action
+tab sid iid (Tuple name spec) = over _render tabRender spec
+  where
+    tabRender renderer d p s c =
+      [div [ className $ "tab-pane " <> if sid ==iid then " show active" else " fade"] $ renderer d p s c]
+
+
+performAction :: forall eff props. PerformAction eff State props Action
+performAction (ChangeTab i) _ _ = void do
+  cotransform \_ -> i
+
+render :: forall eff state props action. State -> List (Tuple String (Spec eff state props action)) -> Render State props Action
+render at ls d p s c =
+  [ nav []
+    [ div [className "nav nav-tabs"]
+      $ toUnfoldable $ mapWithIndex (item at) ls
+    ]
+  ]
+  where
+    item :: forall a. Int -> Int -> (Tuple String a) -> ReactElement
+    item sid iid (Tuple name _) =
+      a [className $ "nav-item nav-link" <> if sid == iid then " active"  else "", onClick \e -> d $ ChangeTab iid] [text name]