sprocket

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

-export([introduction_page/2]).
-export_type([introduction_page_props/0]).

-type introduction_page_props() :: introduction_page_props.

-spec introduction_page(sprocket@socket:socket(), introduction_page_props()) -> {sprocket@socket:socket(),
    list(sprocket@element:element())}.
introduction_page(Socket, _) ->
    sprocket@component:render(
        Socket,
        [sprocket@html:'div'(
                [sprocket@html@attribute:class(<<"flex flex-col p-10"/utf8>>)],
                [sprocket@html:'div'(
                        [],
                        [sprocket@html:h1(
                                [sprocket@html@attribute:class(
                                        <<"text-xl mb-2"/utf8>>
                                    )],
                                [sprocket@html:text(
                                        <<"Welcome to Sprocket Docs!"/utf8>>
                                    )]
                            ),
                            sprocket@component:component(
                                fun docs@components@clock:clock/2,
                                {clock_props,
                                    {some, <<"The current time is: "/utf8>>}}
                            )]
                    ),
                    sprocket@html:'div'(
                        [],
                        [sprocket@html:p(
                                [],
                                [sprocket@html:text(
                                        <<"An html escaped & safe <span style=\"color: green\">string</span>"/utf8>>
                                    )]
                            ),
                            sprocket@html:p(
                                [],
                                [sprocket@html:dangerous_raw_html(
                                        <<"A <b>raw <em>html</em></b> <span style=\"color: blue\">string</span></b>"/utf8>>
                                    )]
                            ),
                            sprocket@component:component(
                                fun docs@components@counter:counter/2,
                                {counter_props, {some, 0}}
                            ),
                            sprocket@component:component(
                                fun docs@components@say_hello:say_hello/2,
                                say_hello_props
                            )]
                    )]
            )]
    ).