Redmage/views/components/image_card.templ

103 lines
2.9 KiB
Plaintext
Raw Permalink Normal View History

package components
import "github.com/tigorlazuardi/redmage/models"
import "fmt"
2024-05-08 19:32:14 +07:00
import "time"
type ImageCardOption uint
func (o ImageCardOption) Has(opt ImageCardOption) bool {
return o&opt != 0
}
func (o ImageCardOption) SetCond(opt ImageCardOption, cond bool) ImageCardOption {
if cond {
return o | opt
}
return o
}
const (
HideNothing ImageCardOption = 0
HideTitle ImageCardOption = 1 << iota
HideSubreddit
HidePoster
HideDevice
)
templ ImageCard(data *models.Image, opts ImageCardOption) {
2024-05-08 19:32:14 +07:00
<div
x-data={ fmt.Sprintf(`{
time: %d,
get timeTooltip() {
return dayjs.unix(this.time).tz(dayjs.tz.guess()).format('ddd, D MMM YYYY HH:mm:ss Z')
},
get relativeTime() {
return dayjs.unix(this.time).tz(dayjs.tz.guess()).fromNow()
},
}`, data.CreatedAt) }
class="not-prose card card-bordered bg-base-100 hover:bg-base-200 shadow-xl min-w-[16rem] max-w-[16rem] rounded-xl top-0 hover:-top-1 hover:drop-shadow-2xl transition-all"
2024-06-10 14:52:53 +07:00
id={ fmt.Sprintf("image-card-%s-%s", data.Subreddit, data.PostName) }
2024-05-08 19:32:14 +07:00
>
<figure>
<a
href={ templ.URL(fmt.Sprintf("/img/%s", data.ImageRelativePath)) }
target="_blank"
>
<img
2024-05-01 18:16:54 +07:00
class="object-contain max-w-[16rem] max-h-[16rem]"
src={ fmt.Sprintf("/img/%s", data.ThumbnailRelativePath) }
2024-04-30 14:12:33 +07:00
alt={ data.PostTitle }
loading="lazy"
/>
</a>
</figure>
2024-05-01 14:39:34 +07:00
<div class="flex-1"></div>
<div class="card-body">
if !opts.Has(HideTitle) {
<a
href={ templ.URL(data.PostURL) }
2024-05-01 14:39:34 +07:00
class="card-title font-bold underline text-sm text-primary"
2024-04-30 14:12:33 +07:00
>{ truncateTitle(data.PostTitle) }</a>
}
2024-05-01 14:39:34 +07:00
<a class="text-primary text-sm underline" href={ templ.URL(data.PostAuthorURL) }>{ data.PostAuthor }</a>
<div class="flex-1"></div>
2024-05-01 14:39:34 +07:00
<div class="flex">
2024-05-08 19:32:14 +07:00
<div class="tooltip" :data-tip="timeTooltip">
<span class="text-xs" :class="{ 'text-xs': false }" x-text="relativeTime">{ time.Unix(data.CreatedAt, 0).Format("Mon, _2 Jan 2006 15:04:05 MST") } </span>
</div>
</div>
2024-05-01 14:27:09 +07:00
<div class="grid grid-cols-2">
<p class="text-xs">{ fmt.Sprintf("%d \u00d7 %d", data.ImageWidth, data.ImageHeight) } px</p>
<p class="text-xs text-end">{ formatByteSize(data.ImageSize) }</p>
</div>
if data.R.Device != nil && !opts.Has(HideDevice) {
<a class="my-4" href={ templ.URL(fmt.Sprintf("/devices/details/%s", data.R.Device.Slug)) }>
<div class="divider text-accent underline text-wrap text-center">{ data.R.Device.Name }</div>
</a>
}
</div>
</div>
}
2024-05-01 14:27:09 +07:00
func formatByteSize(size int64) string {
if size < 1024 {
return fmt.Sprintf("%d B", size)
}
if size < 1024*1024 {
return fmt.Sprintf("%.2f KiB", float64(size)/1024)
}
if size < 1024*1024*1024 {
return fmt.Sprintf("%.2f MiB", float64(size)/(1024*1024))
}
return fmt.Sprintf("%.2f GiB", float64(size)/(1024*1024*1024))
}
func truncateTitle(title string) string {
if len(title) > 52 {
return title[:50] + "..."
}
return title
}