grand commit

components/pages/product/thumb.tsx

@@ -0,0 +1,46 @@
+import {ProductResource} from '@prisma/client'
+import Image from 'next/image'
+import React from 'react'
+
+import {Button} from '@/ui/button'
+import {DialogTrigger} from '@/ui/dialog'
+
+type PropType = {
+	selected: boolean
+	index: number
+	onClick: () => void
+	image: ProductResource
+}
+
+export const Thumb: React.FC<PropType> = props => {
+	const {selected, index, onClick, image} = props
+
+	return (
+		<div
+			className={'embla-thumbs__slide'.concat(
+				selected ? 'embla-thumbs__slide--selected' : ''
+			)}
+		>
+			<DialogTrigger asChild>
+				<button
+					onClick={onClick}
+					type='button'
+					className='embla-thumbs__slide__number'
+				>
+					<Image
+						src={image.uri.replace('.jpg', '-thumb.jpg')}
+						alt=''
+						width={96}
+						height={96}
+						className='rounded-md border'
+						style={{
+							width: '96px',
+							height: '96px',
+							objectFit: 'cover'
+						}}
+					/>
+				</button>
+			</DialogTrigger>
+		</div>
+	)
+}