First version of facets

src/UserPage.purs

@@ -4,8 +4,8 @@ import Control.Monad.Eff.Console (CONSOLE)
 import DOM (DOM)
 import Network.HTTP.Affjax (AJAX)
 import Prelude hiding (div)
-import React.DOM (a, div, h3, h5, h6, img, li, small, span, text, ul)
-import React.DOM.Props (_id, className, src)
+import React.DOM (a, div, h3, h5, h6, img, li, nav, small, span, table, tbody, td, text, th, thead, tr, ul)
+import React.DOM.Props (_data, _id, aria, className, href, role, scope, src)
 import Thermite (PerformAction, Render, Spec, modifyState, simpleSpec)
 
 
@@ -94,7 +94,63 @@ userPageSpec = simpleSpec performAction render
             ]
           ]
         , div [className "row",_id "user-page-footer"]
-          [
+          [ div [className "col-md-12"]
+            [ nav []
+              [ div [className "nav nav-tabs", _id "nav-tab",role "tablist"]
+                [
+                  a [className "nav-item nav-link active",_id "nav-home-tab",  _data {toggle : "tab"},href "#nav-home",role "tab",aria {controls : "nav-home"},aria {selected:true}] [ text "Publications (12)"]
+
+                , a [className "nav-item nav-link",_id "nav-profile-tab",  _data {toggle : "tab"},href "#nav-profile",role "tab",aria {controls : "nav-profile"},aria {selected:true}] [ text "Brevets (2)"]
+
+                ,a [className "nav-item nav-link",_id "nav-contact-tab",  _data {toggle : "tab"},href "#nav-contact",role "tab",aria {controls : "nav-contact"},aria {selected:true}] [ text "Projets IMT (5)"]
+
+                ]
+              ]
+            , div [className "tab-content" , _id "nav-tabContent"]
+              [
+                div [className "tab-pane fade show active", role "tabpanel", aria {labelledby : "nav-home-tab"}, _id "nav-home"]
+                [
+                  table [ className "table"]
+                  [ thead [ className "thead-dark"]
+                    [ tr []
+                      [
+                        th [ scope "col"]
+                        [ text "Date"
+                        ]
+                      , th [scope "col"]
+                        [ text "Description"
+                        ]
+                      , th [ scope "col"]
+                        [ text "Projects"]
+                      , th [ scope "col"]
+                        [ text " Favorite"]
+
+                      , th [scope "col"]
+                        [text "Delete"]
+
+                      ]
+                    ]
+                  , tbody []
+                    [ tr []
+                      [ td [] [ text "2012/03/06"]
+                      , td [] [ text "use of acoustic mission"]
+                      , td [] [ text "use of acoustic emission"]
+                      , td [] [ text "use of acoustic emission"]
+                      , td [] [ text "use of acoustic emission"]
+                      ]
+                    ]
+                  ]
+                ]
+              , div [className "tab-pane fade show", role "tabpanel", aria {labelledby : "nav-profile-tab"}, _id "nav-profile"]
+                [
+                  h3 [] [text "hello1"]
+                ]
+              , div [className "tab-pane fade show", role "tabpanel", aria {labelledby : "nav-contact-tab"}, _id "nav-contact"]
+                [
+                  h3 [] [text "hello2"]
+                ]
+              ]
+            ]
           ]
         ]
       ]