posts.templ

package website

import "fmt"

type PostsGridOptions struct {
	ShowPreview bool
}

templ PostsGrid(posts []*Post, opts PostsGridOptions) {
	<div class="grid gap-8 md:grid-cols-2 lg:grid-cols-3 lg:gap-x-5 lg:gap-y-12">
		for _, post := range posts {
			if !post.Hidden {
				@PostCard(post, opts)
			}
		}
	</div>
}

templ PostCard(post *Post, opts PostsGridOptions) {
	<div>
		if opts.ShowPreview && post.PreviewImage != "" {
			<div class="p-4 h-40">
				<img src={ post.PreviewImage } alt={ post.Title } class="object-contain object-left w-2/3 h-full"/>
			</div>
		}
		<div class="mt-4 flex items-center gap-x-8">
			@postTypeBadge(post)
			<p>{ post.Date.Format("2006-01-02") }</p>
			<p>{ fmt.Sprintf("%d minutes", int(post.ReadingTime.Minutes())) }</p>
		</div>
		<a href={ templ.URL(post.URL()) } class="hover:text-v-lilac">
			<h3 class="mt-2 v-h3">{ post.Title }</h3>
		</a>
		<div class="mt-2 flex flex-wrap gap-x-2">
			for tag := range post.Tags {
				<a href={ templ.URL("/blog/?tags=" + tag) } class="px-2 v-p group/tag hover:bg-v-pink">
					<span class="text-v-gray group-hover/tag:text-v-white">#</span><span class="text-v-black/70 group-hover/tag:text-v-white">{ tag }</span>
				</a>
			}
		</div>
		<p class="mt-2">{ post.Subheading }</p>
	</div>
	// </a>
}

templ postTypeBadge(post *Post) {
	<p class="inline-flex items-center px-2.5 py-0.5 bg-v-lilac text-v-white">
		{ string(post.Type) }
	</p>
}

templ postTagBadges(post *Post) {
	<div class="flex flex-wrap gap-x-4">
		for tag := range post.Tags {
			<p class="inline-flex items-center my-2 px-2.5 py-0.5 bg-v-gray text-v-white">
				{ tag }
			</p>
		}
	</div>
}