Aspect Ratio

package showcase

import "github.com/axzilla/templui/components"

templ AspectRatioDefault() {
	@components.AspectRatio(components.AspectRatioProps{
		Ratio: components.AspectRatioVideo,
		Class: "rounded-md overflow-hidden",
	}) {
		<img
			src="/assets/img/aspect_ratio_placeholder.jpeg"
			alt="Example image"
			class="h-full w-full object-cover"
		/>
	}
}

package components

import "github.com/axzilla/templui/utils"

type AspectRatioVariant string

const (
	AspectRatioAuto     AspectRatioVariant = "auto"
	AspectRatioSquare   AspectRatioVariant = "square"
	AspectRatioVideo    AspectRatioVariant = "video"
	AspectRatioPortrait AspectRatioVariant = "portrait"
	AspectRatioWide     AspectRatioVariant = "wide"
)

type AspectRatioProps struct {
	ID         string
	Class      string
	Attributes templ.Attributes
	Ratio      AspectRatioVariant
}

templ AspectRatio(props ...AspectRatioProps) {
	{{ var p AspectRatioProps }}
	if len(props) > 0 {
		{{ p = props[0] }}
	}
	<div
		if p.ID != "" {
			id={ p.ID }
		}
		class={
			utils.TwMerge(
				"relative w-full",
				getAspectRatioClass(p.Ratio),
				p.Class,
			),
		}
		{ p.Attributes... }
	>
		<div class="absolute inset-0">
			{ children... }
		</div>
	</div>
}

func getAspectRatioClass(ratio AspectRatioVariant) string {
	switch ratio {
	case AspectRatioSquare:
		return "aspect-square"
	case AspectRatioVideo:
		return "aspect-video"
	case AspectRatioPortrait:
		return "aspect-[3/4]"
	case AspectRatioWide:
		return "aspect-[2/1]"
	default:
		return "aspect-square"
	}
}