Redmage/views/components/image_card.templ

package components

import "github.com/tigorlazuardi/redmage/models"
import "fmt"
import "github.com/tigorlazuardi/redmage/views/utils"

type ImageCardOption uint

func (o ImageCardOption) Has(opt ImageCardOption) bool {
	return o&opt != 0
}

const (
	HideTitle ImageCardOption = 1 << iota
	HideSubreddit
	HidePoster
)

templ ImageCard(data *models.Image, opts ImageCardOption) {
	<div 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">
		<figure>
			<a
				href={ templ.URL(fmt.Sprintf("/img/%s", data.ImageRelativePath)) }
				target="_blank"
			>
				<img
					class="object-contain max-w-[16rem] max-h-[16rem]"
					src={ fmt.Sprintf("/img/%s", data.ThumbnailRelativePath) }
					alt={ data.PostTitle }
				/>
			</a>
		</figure>
		<div class="flex-1"></div>
		<div class="card-body">
			if !opts.Has(HideTitle) {
				<a
					href={ templ.URL(data.PostURL) }
					class="card-title font-bold underline text-sm text-primary"
				>{ truncateTitle(data.PostTitle) }</a>
			}
			<a class="text-primary text-sm underline" href={ templ.URL(data.PostAuthorURL) }>{ data.PostAuthor }</a>
			<div class="flex-1"></div>
			<div class="flex">
				@utils.RelativeTimeNode(fmt.Sprintf("relative-time-%s", data.PostName), data.CreatedAt, "text-sm")
			</div>
			<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>
		</div>
	</div>
}

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
}