use tailwind and daisyui

This commit is contained in:
Ruidy 2024-11-15 11:09:18 +01:00
parent c8490bd803
commit af27ee4a82
No known key found for this signature in database
GPG key ID: E00F51288CB857CC
2 changed files with 92 additions and 21 deletions

View file

@ -9,31 +9,23 @@ templ BaseLayout() {
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="description" content="Property Management System"/>
<link rel="icon" href="/static/icons/favicon-main.png"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.purple.min.css"/>
<link href="https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css" rel="stylesheet" type="text/css"/>
<script src="https://cdn.tailwindcss.com"></script>
<script src="/static/js/htmx.js" defer></script>
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("htmx:beforeSwap", (e) => {
if([422,401].includes(e.detail.xhr.status)) {
e.detail.shouldSwap = true
e.detail.isError = false
}
})
})
</script>
document.addEventListener("DOMContentLoaded", () => {
document.addEventListener("htmx:beforeSwap", (e) => {
if([422,401].includes(e.detail.xhr.status)) {
e.detail.shouldSwap = true
e.detail.isError = false
}
})
})
</script>
</head>
<body hx-boost="true" style="display: flex; flex-direction: column; min-height: 100vh;">
<nav class="container">
<ul>
<li><a href="/"><b>🏨 RentEase </b> </a></li>
</ul>
<ul>
<li><a href="/bookings">Bookings</a></li>
<li><a href="/reports">Reports</a></li>
<li><a href="/bookings/new" role="button">New Booking</a></li>
</ul>
</nav>
@navbar()
<main class="container" style="flex: 1 0 auto;">
{ children... }
</main>
@ -48,3 +40,45 @@ templ BaseLayout() {
</body>
</html>
}
templ navbar() {
<nav class="navbar bg-base-100">
<div class="navbar-start">
<div class="dropdown">
<div tabindex="0" role="button" class="btn btn-ghost lg:hidden">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-5 w-5"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M4 6h16M4 12h8m-8 6h16"
></path>
</svg>
</div>
<ul
tabindex="0"
class="menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow"
>
<li><a href="/bookings">Bookings</a></li>
<li><a href="/reports">Reports</a></li>
</ul>
</div>
<a class="btn btn-ghost text-xl">🏨 RentEase </a>
</div>
<div class="navbar-center hidden lg:flex">
<ul class="menu menu-horizontal px-1">
<li><a href="/bookings">Bookings</a></li>
<li><a href="/reports">Reports</a></li>
</ul>
</div>
<div class="navbar-end">
<a href="/bookings/new" role="button" class="btn btn-primary">New Booking</a>
</div>
</nav>
}

View file

@ -29,7 +29,15 @@ func BaseLayout() templ.Component {
templ_7745c5c3_Var1 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\"><head><title>RentEase | Your Property Management System</title><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"description\" content=\"Property Management System\"><link rel=\"icon\" href=\"/static/icons/favicon-main.png\"><link rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/@picocss/pico@2/css/pico.purple.min.css\"><script src=\"/static/js/htmx.js\" defer></script><script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js\"></script><script>\n document.addEventListener(\"DOMContentLoaded\", () => {\n document.addEventListener(\"htmx:beforeSwap\", (e) => {\n if([422,401].includes(e.detail.xhr.status)) {\n e.detail.shouldSwap = true\n e.detail.isError = false\n }\n })\n })\n </script></head><body hx-boost=\"true\" style=\"display: flex; flex-direction: column; min-height: 100vh;\"><nav class=\"container\"><ul><li><a href=\"/\"><b>🏨 RentEase </b></a></li></ul><ul><li><a href=\"/bookings\">Bookings</a></li><li><a href=\"/reports\">Reports</a></li><li><a href=\"/bookings/new\" role=\"button\">New Booking</a></li></ul></nav><main class=\"container\" style=\"flex: 1 0 auto;\">")
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<!doctype html><html lang=\"en\"><head><title>RentEase | Your Property Management System</title><meta charset=\"UTF-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><meta name=\"description\" content=\"Property Management System\"><link rel=\"icon\" href=\"/static/icons/favicon-main.png\"><link href=\"https://cdn.jsdelivr.net/npm/daisyui@4.12.14/dist/full.min.css\" rel=\"stylesheet\" type=\"text/css\"><script src=\"https://cdn.tailwindcss.com\"></script><script src=\"/static/js/htmx.js\" defer></script><script defer src=\"https://cdn.jsdelivr.net/npm/alpinejs@3.14.0/dist/cdn.min.js\"></script><script>\n document.addEventListener(\"DOMContentLoaded\", () => {\n document.addEventListener(\"htmx:beforeSwap\", (e) => {\n if([422,401].includes(e.detail.xhr.status)) {\n e.detail.shouldSwap = true\n e.detail.isError = false\n }\n })\n })\n </script></head><body hx-boost=\"true\" style=\"display: flex; flex-direction: column; min-height: 100vh;\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
templ_7745c5c3_Err = navbar().Render(ctx, templ_7745c5c3_Buffer)
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<main class=\"container\" style=\"flex: 1 0 auto;\">")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
@ -45,4 +53,33 @@ func BaseLayout() templ.Component {
})
}
func navbar() templ.Component {
return templruntime.GeneratedTemplate(func(templ_7745c5c3_Input templruntime.GeneratedComponentInput) (templ_7745c5c3_Err error) {
templ_7745c5c3_W, ctx := templ_7745c5c3_Input.Writer, templ_7745c5c3_Input.Context
if templ_7745c5c3_CtxErr := ctx.Err(); templ_7745c5c3_CtxErr != nil {
return templ_7745c5c3_CtxErr
}
templ_7745c5c3_Buffer, templ_7745c5c3_IsBuffer := templruntime.GetBuffer(templ_7745c5c3_W)
if !templ_7745c5c3_IsBuffer {
defer func() {
templ_7745c5c3_BufErr := templruntime.ReleaseBuffer(templ_7745c5c3_Buffer)
if templ_7745c5c3_Err == nil {
templ_7745c5c3_Err = templ_7745c5c3_BufErr
}
}()
}
ctx = templ.InitializeContext(ctx)
templ_7745c5c3_Var2 := templ.GetChildren(ctx)
if templ_7745c5c3_Var2 == nil {
templ_7745c5c3_Var2 = templ.NopComponent
}
ctx = templ.ClearChildren(ctx)
_, templ_7745c5c3_Err = templ_7745c5c3_Buffer.WriteString("<nav class=\"navbar bg-base-100\"><div class=\"navbar-start\"><div class=\"dropdown\"><div tabindex=\"0\" role=\"button\" class=\"btn btn-ghost lg:hidden\"><svg xmlns=\"http://www.w3.org/2000/svg\" class=\"h-5 w-5\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\"><path stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 6h16M4 12h8m-8 6h16\"></path></svg></div><ul tabindex=\"0\" class=\"menu menu-sm dropdown-content bg-base-100 rounded-box z-[1] mt-3 w-52 p-2 shadow\"><li><a href=\"/bookings\">Bookings</a></li><li><a href=\"/reports\">Reports</a></li></ul></div><a class=\"btn btn-ghost text-xl\">🏨 RentEase </a></div><div class=\"navbar-center hidden lg:flex\"><ul class=\"menu menu-horizontal px-1\"><li><a href=\"/bookings\">Bookings</a></li><li><a href=\"/reports\">Reports</a></li></ul></div><div class=\"navbar-end\"><a href=\"/bookings/new\" role=\"button\" class=\"btn btn-primary\">New Booking</a></div></nav>")
if templ_7745c5c3_Err != nil {
return templ_7745c5c3_Err
}
return templ_7745c5c3_Err
})
}
var _ = templruntime.GeneratedTemplate