Bootstrap.elm

module Main exposing (main)

import Browser exposing (sandbox)
import Button
import Element exposing (..)
import Input


type Msg
    = NoOp
    | OnTextChanged String


view : () -> Element Msg
view _ =
    column [ spacing 20, padding 20 ]
        [ viewButtons
        , viewButtonsOutline
        , viewButtonsSizes
        , viewInputs
        ]


viewInputs =
    let
        content =
            row [ spacing 10 ]
                [ Input.text OnTextChanged
                    |> Input.toEl
                ]
    in
    viewWrapper "Sizes" content


viewButtonsSizes : Element Msg
viewButtonsSizes =
    let
        content =
            row [ spacing 10 ]
                [ Button.primary NoOp
                    |> Button.withText "Small Button"
                    |> Button.withSmallSize
                    |> Button.toEl
                , Button.primary NoOp
                    |> Button.withText "Normal Button"
                    |> Button.toEl
                , Button.primary NoOp
                    |> Button.withText "Large Button"
                    |> Button.withLargeSize
                    |> Button.toEl
                ]
    in
    viewWrapper "Sizes" content


viewWrapper : String -> Element Msg -> Element Msg
viewWrapper textString content =
    column [ spacing 10 ]
        [ text textString
        , content
        ]


viewButtonsOutline : Element Msg
viewButtonsOutline =
    let
        button initFn textVal =
            initFn NoOp
                |> Button.withText textVal
                |> Button.withOutline
                |> Button.toEl

        content =
            row
                [ spacing 20
                , padding 20
                ]
                [ button Button.primary "Primary"
                , button Button.secondary "Secondary"
                , button Button.success "Success"
                , button Button.danger "Danger"
                , button Button.warning "Warning"
                , button Button.info "Info"
                , button Button.light "Light"
                , button Button.dark "Dark"
                ]
    in
    viewWrapper "Buttons" content


viewButtons : Element Msg
viewButtons =
    let
        button initFn textVal =
            initFn NoOp
                |> Button.withText textVal
                |> Button.toEl

        content =
            row
                [ spacing 20
                , padding 20
                ]
                [ button Button.primary "Primary"
                , button Button.secondary "Secondary"
                , button Button.success "Success"
                , button Button.danger "Danger"
                , button Button.warning "Warning"
                , button Button.info "Info"
                , button Button.light "Light"
                , button Button.dark "Dark"
                ]
    in
    viewWrapper "Outline" content


main =
    sandbox
        { init = ()
        , view = \model -> layout [] (view model)
        , update = \_ _ -> ()
        }