Executable specification page

let readyView = productScreen "ready"
let validationView = productScreen "validation"
let states =
    [ Tab.create "ready" "Ready" readyView
      Tab.create "validation" "Validation" validationView ]
    |> Tabs.create "page-example-render-states" "Render workflow states"
    |> Tabs.withVariant TabsVariant.Underlined
    |> Tabs.render
let specificationPage =
    DocumentationPage.create "render-workflow" "Render a view" |> DocumentationPage.withDescription "Review the workflow." |> DocumentationPage.withLayout Canvas |> DocumentationPage.withRightRail NoRail |> DocumentationPage.withSections [
        DocumentationSection.create "wireframe" "Wireframe" [ states ]
        DocumentationSection.create "sequence" "Sequence" [ sequence () |> SequenceDiagram.render |> Mermaid.create |> Mermaid.render ]
        DocumentationSection.create "rules" "Rules" [
            ul {
                li { "Encode text and attributes." }
                li { "Return deterministic HTML." }
            } ] ]