blob: 2998b05d6d3de5d0ff4714cde46d8ff6cf2451e6 (
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
|
<script lang="ts">
import type { EditorialCard } from '@jet-app/app-store/api/models';
import Hero from '~/components/hero/Hero.svelte';
import AppEventDate from '~/components/AppEventDate.svelte';
import AppLockupDetail from '~/components/hero/AppLockupDetail.svelte';
import mediaQueries from '~/utils/media-queries';
import { isRtl } from '~/utils/locale';
export let item: EditorialCard;
$: isPortraitLayout = $mediaQueries === 'xsmall';
</script>
<Hero
action={item.clickAction}
artwork={item.artwork}
subtitle={item.subtitle}
title={item.title}
pinArtworkToHorizontalEnd={true}
backgroundColor={item.artwork?.backgroundColor}
isMediaDark={item.mediaOverlayStyle === 'dark'}
profileOverride={isPortraitLayout ? 'large-hero-portrait-iphone' : null}
>
<svelte:fragment slot="eyebrow">
{#if item.appEventFormattedDates}
<AppEventDate formattedDates={item.appEventFormattedDates} />
{:else}
{item.caption}
{/if}
</svelte:fragment>
<svelte:fragment slot="details">
{#if item.lockup}
<AppLockupDetail
lockup={item.lockup}
isOnDarkBackground={item.mediaOverlayStyle === 'dark'}
/>
{/if}
</svelte:fragment>
</Hero>
|
