76 lines
2.5 KiB
Plaintext
76 lines
2.5 KiB
Plaintext
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-between flex-wrap">
|
||
<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" hx-boost="true">
|
||
for _, subreddit := range data.Subreddits.Data {
|
||
@SubredditCard(c, subreddit)
|
||
}
|
||
</div>
|
||
}
|
||
</main>
|
||
}
|
||
|
||
templ SubredditCard(c *views.Context, data *models.Subreddit) {
|
||
<div class="not-prose card card-bordered bg-base-100 hover:bg-base-200 shadow-xl w-80 top-0 hover:-top-1 transition-all rounded-none">
|
||
if len(data.R.Images) > 0 {
|
||
<figure class="p-8">
|
||
<a class="flex content-center" href={ templ.URL(fmt.Sprintf("/subreddits/details/%s", data.Name)) }>
|
||
<img
|
||
class="object-contain max-w-[16rem] max-h-[16rem]"
|
||
src={ fmt.Sprintf("/img/%s", data.R.Images[0].ThumbnailRelativePath) }
|
||
alt={ data.Name }
|
||
/>
|
||
</a>
|
||
</figure>
|
||
} else {
|
||
<figure class="p-8">
|
||
<a href={ templ.URL(fmt.Sprintf("/subreddits/details/%s", data.Name)) }>
|
||
@imagePlaceholder()
|
||
</a>
|
||
</figure>
|
||
}
|
||
<div class="card-body">
|
||
<div class="flex-1"></div>
|
||
<a href={ templ.URL(fmt.Sprintf("/subreddits/details/%s", data.Name)) }>
|
||
<p class="text-center my-4 underline text-primary">{ data.Name }</p>
|
||
</a>
|
||
</div>
|
||
</div>
|
||
}
|
||
|
||
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>
|
||
}
|