Genie Discord forum

using GenieFramework
@genietools

# we define the a toggle function with @methods so that it can be accessed by the Quasar components in the UI
@methods """
    toggletailwind: function() {
    const tailwindStylesheet = document.getElementById('tailwind');
    if (tailwindStylesheet.disabled) {
        tailwindStylesheet.disabled = false;
    } else {
        tailwindStylesheet.disabled = true;
    }
} 
"""

tailwind_head = [
  link(href = "https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css", rel = "stylesheet", id="tailwind" )
]

ui() = [
        htmldiv(class="bg-blue-500 text-white p-6 rounded-lg", [
            h1(class="text-2xl mb-4", "Hello, TailwindCSS!"),
            p(class="text-lg", "This is a simple box styled with TailwindCSS.")
        ]),
        btn("Toggle tailwind", @click("toggletailwind"))
       ]

# at the moment, the @page macro does not support the head_content argument so we have to use route instead
# @init initializes and returns the reactive model of the app
route("/") do
  page(@init, ui, head_content = join(tailwind_head))
end