grand commit

2025-02-07 08:34:42 +02:00
parent f594f001f6
commit c6c34f0453
53 changed files with 1283 additions and 625 deletions
--- a/components/pages/product/carousel.tsx
+++ b/components/pages/product/carousel.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import {ProductResource} from '@prisma/client'
+import {EmblaOptionsType} from 'embla-carousel'
+import useEmblaCarousel from 'embla-carousel-react'
+import Image from 'next/image'
+import React, {useCallback, useEffect, useState} from 'react'
+
+import {Thumb} from './thumb'
+import {Dialog, DialogContent, DialogTitle} from '@/ui/dialog'
+
+type PropType = {
+	slides: number[]
+	options?: EmblaOptionsType
+}
+
+export default function ProductCarousel({
+	images,
+	title
+}: {
+	images: ProductResource[] | null
+	title: string
+}) {
+	//const {slides, options} = props
+	const [selectedIndex, setSelectedIndex] = useState(0)
+	const [emblaMainRef, emblaMainApi] = useEmblaCarousel({}) //options
+	const [emblaThumbsRef, emblaThumbsApi] = useEmblaCarousel({
+		containScroll: 'keepSnaps',
+		dragFree: true
+	})
+
+	const onThumbClick = useCallback(
+		(index: number) => {
+			if (!emblaMainApi || !emblaThumbsApi) return
+			emblaMainApi.scrollTo(index)
+		},
+		[emblaMainApi, emblaThumbsApi]
+	)
+
+	const onSelect = useCallback(() => {
+		if (!emblaMainApi || !emblaThumbsApi) return
+		setSelectedIndex(emblaMainApi.selectedScrollSnap())
+		emblaThumbsApi.scrollTo(emblaMainApi.selectedScrollSnap())
+	}, [emblaMainApi, emblaThumbsApi, setSelectedIndex])
+
+	useEffect(() => {
+		if (!emblaMainApi) return
+		onSelect()
+
+		emblaMainApi.on('select', onSelect).on('reInit', onSelect)
+	}, [emblaMainApi, onSelect])
+	//let featuredImage: ProductResource | null | undefined
+	/*if ((resources || []).length > 0) {
+		featuredImage = resources?.find(resource => resource.isFeature)
+	}*/
+
+	return (
+		<div className='embla my-8'>
+			<div className='embla__viewport' ref={emblaMainRef}>
+				<div className='embla__container'>
+					{images?.map((image: ProductResource, index: number) => (
+						<div className='embla__slide' key={index}>
+							<div className='embla__slide__number h-[480px] overflow-hidden'>
+								<Image
+									src={image.uri}
+									alt=''
+									width={image.width || 100}
+									height={image.height || 100}
+									sizes='100vw'
+									style={{
+										width: '100%',
+										height: 'auto',
+										maxHeight: '480px',
+										objectFit: 'contain'
+									}}
+								/>
+							</div>
+						</div>
+					))}
+				</div>
+			</div>
+
+			<div className='embla-thumbs mb-8 mt-6'>
+				<div className='embla-thumbs__viewport' ref={emblaThumbsRef}>
+					<div className='embla-thumbs__container flex items-center justify-center gap-x-6'>
+						{images?.map((image: ProductResource, index: number) => (
+							<Dialog key={index}>
+								<DialogTitle className='hidden'>{title}</DialogTitle>
+								<Thumb
+									image={image}
+									onClick={() => onThumbClick(index)}
+									selected={index === selectedIndex}
+									index={index}
+								/>
+								<DialogContent className='overflow w-full'>
+									<Image
+										src={image.uri}
+										alt=''
+										width={image.width || 100}
+										height={image.height || 100}
+										sizes='100vw'
+										style={{
+											width: '100%',
+											maxHeight: '100dvh',
+											objectFit: 'contain'
+										}}
+									/>
+								</DialogContent>
+							</Dialog>
+						))}
+					</div>
+				</div>
+			</div>
+		</div>
+	)
+}