Carousel

package showcase

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

templ CarouselAutoplay() {
	@carousel.Carousel(carousel.Props{
		Autoplay: true,
		Interval: 3000,
		Loop:     true,
		Class:    "rounded-md",
	}) {
		@carousel.Content() {
			@carousel.Item() {
				@CarouselAutoplaySlide("Slide 1", "This is the first slide", "bg-blue-500")
			}
			@carousel.Item() {
				@CarouselAutoplaySlide("Slide 2", "This is the second slide", "bg-green-500")
			}
			@carousel.Item() {
				@CarouselAutoplaySlide("Slide 3", "This is the third slide", "bg-purple-500")
			}
		}
		@carousel.Previous()
		@carousel.Next()
		@carousel.Indicators(carousel.IndicatorsProps{
			Count: 3,
		})
	}
}

templ CarouselAutoplaySlide(title, description, bg string) {
	<div class={ bg,"w-full h-96 flex items-center justify-center text-white" }>
		<div class="text-center">
			<h2 class="text-3xl font-bold mb-2">{ title }</h2>
			<p class="text-xl">{ description }</p>
		</div>
	</div>
}

package showcase

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

templ CarouselMinimal() {
	@carousel.Carousel(carousel.Props{
		Interval: 2000,
		Autoplay: true,
		Loop:     true,
		Class:    "rounded-md",
	}) {
		@carousel.Content() {
			@carousel.Item() {
				@CarouselMinimalSlide("Slide 1", "This is the first slide", "bg-blue-500")
			}
			@carousel.Item() {
				@CarouselMinimalSlide("Slide 2", "This is the second slide", "bg-green-500")
			}
			@carousel.Item() {
				@CarouselMinimalSlide("Slide 3", "This is the third slide", "bg-purple-500")
			}
		}
	}
}

templ CarouselMinimalSlide(title, description, bg string) {
	<div class={ bg,"w-full h-96 flex items-center justify-center text-white" }>
		<div class="text-center">
			<h2 class="text-3xl font-bold mb-2">{ title }</h2>
			<p class="text-xl">{ description }</p>
		</div>
	</div>
}

package showcase

import (
	"github.com/axzilla/templui/internal/components/aspectratio"
	"github.com/axzilla/templui/internal/components/carousel"
)

templ CarouselWithImages() {
	@carousel.Carousel(carousel.Props{
		Autoplay: true,
		Interval: 5000,
		Loop:     true,
		Class:    "rounded-md overflow-hidden shadow-md",
	}) {
		@carousel.Content() {
			@carousel.Item() {
				@ImageSlide("/assets/img/demo/carousel-1.jpeg", "Image 1")
				<div class="absolute bottom-0 left-0 right-0 bg-black/50 text-white p-4">
					<p>Nature landscape example 1</p>
				</div>
			}
			@carousel.Item() {
				@ImageSlide("/assets/img/demo/carousel-2.jpeg", "Image 2")
				<div class="absolute bottom-0 left-0 right-0 bg-black/50 text-white p-4">
					<p>Nature landscape example 2</p>
				</div>
			}
			@carousel.Item() {
				@ImageSlide("/assets/img/demo/carousel-3.jpeg", "Image 3")
				<div class="absolute bottom-0 left-0 right-0 bg-black/50 text-white p-4">
					<p>Nature landscape example 3</p>
				</div>
			}
		}
		@carousel.Previous()
		@carousel.Next()
		@carousel.Indicators(carousel.IndicatorsProps{
			Count: 3,
		})
	}
}

templ ImageSlide(src string, alt string) {
	@aspectratio.AspectRatio(aspectratio.Props{
		Ratio: aspectratio.RatioVideo,
	}) {
		<img
			src={ src }
			alt={ alt }
			class="w-full h-full object-cover"
		/>
	}
}