1  <script lang="ts" context="module">
 2      import type {
 3          Shelf,
 4          HeroCarousel as HeroCarouselModel,
 5          HeroCarouselItem as HeroCarouselItemModel,
 6      } from '@jet-app/app-store/api/models';
 7  
 8      interface HeroCarouselShelf extends Shelf {
 9          items: [HeroCarouselModel];
10      }
11  
12      export function isHeroCarouselShelf(
13          shelf: Shelf,
14      ): shelf is HeroCarouselShelf {
15          const { contentType, items } = shelf;
16  
17          return contentType === 'heroCarousel' && Array.isArray(items);
18      }
19  </script>
20  
21  <script lang="ts">
22      import HeroCarousel from '~/components/hero/Carousel.svelte';
23      import HeroCarouselItem from '~/components/jet/item/HeroCarouselItem.svelte';
24      import { isRtl } from '~/utils/locale';
25  
26      export let shelf: HeroCarouselShelf;
27  
28      $: ({ items: ltrItems, rtlItems } = shelf.items[0]);
29      $: items = isRtl() && rtlItems.length ? rtlItems : ltrItems;
30  
31      function deriveBackgroundArtworkFromItem(item: HeroCarouselItemModel) {
32          return item.artwork || item.video?.preview;
33      }
34  </script>
35  
36  <HeroCarousel {shelf} {items} {deriveBackgroundArtworkFromItem} let:item>
37      <HeroCarouselItem {item} />
38  </HeroCarousel>