Skip to content

Instantly share code, notes, and snippets.

@ryannhg
Last active Nov 26, 2020
Embed
What would you like to do?
an example of a component built around a data structure.
module Main exposing (main)
import Html exposing (..)
import Html.Attributes exposing (class)
import Components.Carousel as Carousel exposing (Carousel)
-- INIT
type alias Model =
{ testimonials : Carousel Testimonial
}
type alias Testimonial =
{ quote : String
, author : String
}
init : Model
init =
{ testimonials =
Carousel.create
{ quote = "Cats have ears", author = "Ryan" }
[ { quote = "Dogs also have ears", author = "Alexa" }
, { quote = "I have ears", author = "Erik" }
]
}
-- UPDATE
type Msg
= NextTestimonial
| PreviousTestimonial
| SelectTestimonial Int
update : Msg -> Model -> Model
update msg model =
case msg of
NextTestimonial ->
{ model | testimonials = Carousel.next model.testimonials }
PreviousTestimonial ->
{ model | testimonials = Carousel.previous model.testimonials }
SelectTestimonial index ->
{ model | testimonials = Carousel.select index model.testimonials }
-- VIEW
view : Model -> Html Msg
view model =
div [ class "page" ]
[ Carousel.view
{ carousel = model.testimonials
, onNext = NextTestimonial
, onPrevious = PreviousTestimonial
, onSelect = SelectTestimonial
, viewSlide = viewTestimonial
}
]
viewTestimonial : Testimonial -> Html msg
viewTestimonial options =
div [ class "testimonial" ]
[ p [ class "quote" ] [ text options.quote ]
, p [ class "author" ] [ text options.author ]
]
-- MAIN
main : Program () Model Msg
main =
Browser.sandbox
{ init = init
, update = update
, view = view
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment