sprocket

-module(docs@components@pages@components).
-compile([no_auto_import, nowarn_unused_vars]).

-export([components_page/2]).
-export_type([components_page_props/0]).

-type components_page_props() :: components_page_props.

-spec components_page(sprocket@socket:socket(), components_page_props()) -> {sprocket@socket:socket(),
    list(sprocket@element:element())}.
components_page(Socket, _) ->
    sprocket@component:render(
        Socket,
        [sprocket@html:article(
                [],
                [sprocket@html:h1(
                        [],
                        [sprocket@html:text(<<"Components"/utf8>>)]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"Components let you encapsulate markup and functionality into independent and composable pieces. This page demonstrates how to use components to build a UI."/utf8>>
                            )]
                    ),
                    sprocket@html:h2(
                        [],
                        [sprocket@html:text(
                                <<"Components as Building Blocks"/utf8>>
                            )]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"Components are the fundamental building blocks of your app, allowing you to create modular, reusable, and easy-to-maintain code."/utf8>>
                            )]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"A component is a function that takes a socket and props as arguments, and it may utilize hooks (we will cover hooks more in depth a
                bit later) to manage state and effects, and returns a list of child elements."/utf8>>
                            )]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"Here is a simple example component we'll call "/utf8>>
                            ),
                            sprocket@html:code_text([], <<"hello_button"/utf8>>),
                            sprocket@html:text(
                                <<" that renders a button. We'll also make use of some Tailwind CSS classes here to style our button, but you can use whichever style framework you prefer."/utf8>>
                            )]
                    ),
                    docs@utils@codeblock:codeblock(
                        <<"gleam"/utf8>>,
                        <<"
                import gleam/option.{None, Option, Some}
                import sprocket/socket.{Socket}
                import sprocket/component.{render}
                import sprocket/html.{button, text}
                import sprocket/html/attributes.{class}

                pub type HelloButtonProps {
                  HelloButtonProps(label: Option(String))
                }

                pub fn hello_button(socket: Socket, props: HelloButtonProps) {
                  let HelloButtonProps(label) = props

                  render(
                    socket,
                    [
                      button(
                        [class(\"p-2 bg-blue-500 hover:bg-blue-600 active:bg-blue-700 text-white rounded\")],
                        [
                          text(case label {
                            Some(label) -> label
                            None -> \"Click me!\"
                          }),
                        ],
                      ),
                    ],
                  )
                }
                "/utf8>>
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"As you can see, we've defined our component and it's props. The component takes a socket and props as arguments, and then renders a button with the label passed in as a prop. If no label is passed in, the button will render with the default label of \"Click me!\"."/utf8>>
                            )]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"Because of Gleam's type system guarantees, components can be type checked at compile time, and the compiler will ensure that the component is given the correct props and that the component returns a valid view."/utf8>>
                            )]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"To use this new component in a parent view, we can simply pass it into the "/utf8>>
                            ),
                            sprocket@html:code_text([], <<"component"/utf8>>),
                            sprocket@html:text(
                                <<" function along with the props we want to pass in."/utf8>>
                            )]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"Let's take a look at an example of a page view component that uses the button component we defined above."/utf8>>
                            )]
                    ),
                    docs@utils@codeblock:codeblock(
                        <<"gleam"/utf8>>,
                        <<"
                pub type PageViewProps {
                  PageViewProps
                }

                pub fn page_view(socket: Socket, _props: PageViewProps) {
                  render(
                    socket,
                    [
                      div(
                        [],
                        [
                          component(
                            button,
                            ButtonProps(label: None),
                          ),
                        ],
                      ),
                    ]
                  )
                }
                "/utf8>>
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"Here is our component in action:"/utf8>>
                            )]
                    ),
                    docs@utils@common:example(
                        [sprocket@component:component(
                                fun docs@components@hello_button:hello_button/2,
                                {hello_button_props, none}
                            )]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"That's looking pretty good, but let's add a label to our button. We can do that by passing in a label prop to our component."/utf8>>
                            )]
                    ),
                    docs@utils@codeblock:codeblock(
                        <<"gleam"/utf8>>,
                        <<"
                component(
                  button,
                  ButtonProps(label: Some(\"Say Hello!\")),
                ),
                "/utf8>>
                    ),
                    docs@utils@common:example(
                        [sprocket@component:component(
                                fun docs@components@hello_button:hello_button/2,
                                {hello_button_props,
                                    {some, <<"Say Hello!"/utf8>>}}
                            )]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"Excellent! Now our button has a proper label."/utf8>>
                            )]
                    ),
                    sprocket@html:p(
                        [],
                        [sprocket@html:text(
                                <<"But our humble button isn't very interesting yet. Let's say we want to add some functionality to our button. We can do that by
                implementing some events and state management via hooks, which we'll cover in the next couple sections."/utf8>>
                            )]
                    )]
            )]
    ).