47 lines
939 B
TypeScript
47 lines
939 B
TypeScript
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>
|
|
)
|
|
}
|