about summary refs log blame commit diff
path: root/website/sandbox/learnpianochords/src/UI.elm
blob: 50bbaaa2142d197f443810ce780c7d2e7e0f0657 (plain) (tree)
1
2
3
4
5
6
7




                                    
                 
               


























                              












                                                     
                       
                     
                        
                          
                           


             
                                                                        























                                                           
                    
                       
                     

                           


             
                                                                        













                                                     
                      
                     
                       
                     
                        

                          
                           


             
                                                                       



                                     










                                                 
                     

                      
                     
                    

                        
                                                              
             

          
                                          






                                                       
                            

                                  

                                  
                                   



                          
module UI exposing (..)

import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
import Responsive
import Tailwind


type Color
    = Primary
    | Secondary


bgForColor : Color -> String
bgForColor color =
    case color of
        Primary ->
            "bg-gray-600"

        Secondary ->
            "bg-gray-300"


textForColor : Color -> String
textForColor color =
    case color of
        Primary ->
            "text-white"

        Secondary ->
            "text-black"


simpleButton :
    { label : String
    , handleClick : msg
    , color : Color
    , classes : List String
    }
    -> Html msg
simpleButton { label, handleClick, color, classes } =
    let
        buttonClasses =
            [ bgForColor color
            , textForColor color
            , "py-10"
            , "lg:py-6"
            , "px-20"
            , "lg:px-12"
            , "rounded-lg"
            , Responsive.h2
            ]
    in
    button
        [ class (Tailwind.use <| List.concat [ buttonClasses, classes ])
        , onClick handleClick
        ]
        [ text label ]


textToggleButton :
    { label : String
    , handleClick : msg
    , classes : List String
    , toggled : Bool
    }
    -> Html msg
textToggleButton { label, toggled, handleClick, classes } =
    let
        ( textColor, textTreatment ) =
            if toggled then
                ( "text-red-600", "underline" )

            else
                ( "text-black", "no-underline" )

        buttonClasses =
            [ textColor
            , textTreatment
            , "py-8"
            , "lg:py-5"
            , "px-10"
            , "lg:px-6"
            , Responsive.h2
            ]
    in
    button
        [ class (Tailwind.use <| List.concat [ buttonClasses, classes ])
        , onClick handleClick
        ]
        [ text label ]


textField :
    { placeholderText : String
    , handleInput : String -> msg
    , classes : List String
    }
    -> Html msg
textField { placeholderText, handleInput, classes } =
    let
        inputClasses =
            [ "w-full"
            , "py-10"
            , "lg:py-6"
            , "px-16"
            , "lg:px-10"
            , "border"
            , "rounded-lg"
            , Responsive.h2
            ]
    in
    input
        [ class (Tailwind.use <| List.concat [ inputClasses, classes ])
        , onInput handleInput
        , placeholder placeholderText
        ]
        []


overlayButton :
    { label : String
    , handleClick : msg
    , isVisible : Bool
    }
    -> Html msg
overlayButton { label, handleClick, isVisible } =
    let
        classes =
            [ "fixed"
            , "top-0"
            , "left-0"
            , "block"
            , "z-30"
            , "w-screen"
            , "h-screen"
            , Tailwind.if_ isVisible "opacity-100" "opacity-0"
            ]
    in
    button
        [ classes |> Tailwind.use |> class
        , style "background-color" "rgba(0,0,0,0.30)"
        , onClick handleClick
        ]
        [ h1
            [ style "-webkit-text-stroke-width" "2px"
            , style "-webkit-text-stroke-color" "black"
            , class <|
                Tailwind.use
                    [ "transform"
                    , "-rotate-90"
                    , "text-white"
                    , "font-mono"
                    , Responsive.h1
                    ]
            ]
            [ text label ]
        ]