blob: 295aa8a967e26596cca04bce3e94ed511411a66b (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
|
<!--
@component
Component for rendering a `HeroCarouselItem` view-model from the App Store Client
-->
<script lang="ts">
import type { HeroCarouselItem } from '@jet-app/app-store/api/models';
import Hero from '~/components/hero/Hero.svelte';
import HeroAppLockup from '~/components/hero/AppLockupDetail.svelte';
import mediaQueries from '~/utils/media-queries';
export let item: HeroCarouselItem;
const {
titleText,
badgeText,
overlayType,
callToActionText,
lockup: overlayLockup,
clickAction,
descriptionText,
} = item.overlay || {};
$: artwork = item.artwork || item.video?.preview;
$: isXSmallViewport = $mediaQueries === 'xsmall';
$: video = isXSmallViewport ? item.portraitVideo : item.video;
</script>
<Hero
{artwork}
{video}
title={titleText}
eyebrow={badgeText}
action={clickAction}
backgroundColor={item.backgroundColor}
subtitle={descriptionText}
isMediaDark={item.isMediaDark}
collectionIcons={item.collectionIcons}
>
<svelte:fragment slot="details" let:isPortraitLayout>
{#if overlayLockup && overlayType === 'singleModule'}
<HeroAppLockup lockup={overlayLockup} />
{:else if callToActionText && !isPortraitLayout}
<div class="button-container">
<span class="get-button transparent">
{callToActionText}
</span>
</div>
{/if}
</svelte:fragment>
</Hero>
<style>
.button-container {
--get-button-font: var(--title-3-bold);
margin-top: 16px;
position: relative;
z-index: 1;
}
</style>
|
