Redmage/views/subredditsview/subredditsview.templ

73 lines
2.3 KiB
Plaintext
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

package subredditsview
import "github.com/tigorlazuardi/redmage/views"
import "github.com/tigorlazuardi/redmage/views/components"
import "github.com/tigorlazuardi/redmage/models"
import "strconv"
import "fmt"
templ Subreddit(c *views.Context, data Data) {
@components.Doctype() {
@components.Head(c, components.HeadTitle("Redmage - Subreddits"))
@components.Body(c) {
@SubredditContent(c, data)
}
}
}
templ SubredditContent(c *views.Context, data Data) {
<main class="prose min-w-full">
@components.Container() {
<h1>Subreddits</h1>
if data.Subreddits.Total == 0 {
<div class="divider"></div>
<h3>No Subreddits Found</h3>
<p>Click <a class="text-primary" href="/subreddits/add">here</a> to add a new subreddit.</p>
} else {
<div class="flex justify-center sm:justify-between flex-wrap gap-4">
<h2 class="my-auto">{ strconv.FormatInt(data.Subreddits.Total, 10) } Subreddits Registered</h2>
<a class="btn btn-primary text-base-100 no-underline" href="/subreddits/add">Add Subreddit</a>
</div>
<div class="divider"></div>
}
<div class="flex flex-wrap gap-1 justify-around" hx-boost="true">
for _, subreddit := range data.Subreddits.Data {
@SubredditCard(c, subreddit)
}
</div>
}
</main>
}
templ SubredditCard(c *views.Context, data *models.Subreddit) {
<a
href={ templ.URL(fmt.Sprintf("/subreddits/details/%s", data.Name)) }
class="not-prose card card-bordered bg-base-100 hover:bg-base-200 shadow-xl xs:w-80 w-full max-w-full top-0 hover:-top-1 transition-all rounded-none"
>
if len(data.R.Images) > 0 {
<figure class="p-8">
<img
class="object-contain xs:max-w-[16rem] max-h-[16rem]"
src={ fmt.Sprintf("/img/%s", data.R.Images[0].ThumbnailRelativePath) }
alt={ data.Name }
/>
</figure>
} else {
<figure class="p-8">
@imagePlaceholder()
</figure>
}
<div class="card-body">
<div class="flex-1"></div>
<p class="text-center my-4 underline text-primary">{ data.Name }</p>
</div>
</a>
}
templ imagePlaceholder() {
<svg width="256" height="256" xmlns="http://www.w3.org/2000/svg">
<rect x="2" y="2" width="252" height="252" style="fill:#DEDEDE;stroke:#555555;stroke-width:2"></rect>
<text x="50%" y="50%" font-size="18" text-anchor="middle" alignment-baseline="middle" font-family="monospace, sans-serif" fill="#555555">256×256</text>
</svg>
}