35 lines
979 B
Svelte
35 lines
979 B
Svelte
<script lang="ts">
|
|
import { cn } from '$lib/utils'
|
|
import type { ImageCarouselItem } from '.'
|
|
import * as Carousel from '../carousel'
|
|
|
|
const {
|
|
item,
|
|
class: className,
|
|
isSelected,
|
|
onclick,
|
|
}: {
|
|
item: ImageCarouselItem
|
|
class?: string
|
|
isSelected?: boolean
|
|
onclick?: () => void
|
|
} = $props()
|
|
|
|
const itemClass = $derived(
|
|
cn(
|
|
'object-cover rounded-lg',
|
|
isSelected
|
|
? 'border-2 transition-all border-blue-600 dark:border-blue-500'
|
|
: 'border-2 transition-all border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600',
|
|
!item.aspect || item.aspect === '1:1' ? 'aspect-square' : '',
|
|
item.aspect === '16:9' ? 'aspect-video' : '',
|
|
item.aspect === '9:16' ? 'aspect-9/16' : '',
|
|
item.aspect === '4:3' ? 'aspect-4/3' : '',
|
|
),
|
|
)
|
|
</script>
|
|
|
|
<Carousel.Item {onclick} class={className}>
|
|
<img src={item.image} alt={item.alt} class={itemClass} />
|
|
</Carousel.Item>
|