blob: 66079c224f22d83d1d1ceac5da9b4149317f24ee (
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
|
<script lang="ts">
import type { TodayCard } from '@jet-app/app-store/api/models';
import Hero from '~/components/hero/Hero.svelte';
import type { NamedProfile } from '~/config/components/artwork';
import mediaQueries from '~/utils/media-queries';
import { isRtl } from '~/utils/locale';
export let item: TodayCard;
let profile: NamedProfile;
$: isXSmallViewport = $mediaQueries === 'xsmall';
$: artwork = item.heroMedia?.artworks[0];
$: video = isXSmallViewport ? null : item.heroMedia?.videos[0];
$: ({ backgroundColor, clickAction, heading, inlineDescription, title } =
item);
$: profile = isXSmallViewport
? 'large-hero-story-card-portrait'
: isRtl()
? 'large-hero-story-card-rtl'
: 'large-hero-story-card';
</script>
<Hero
{artwork}
{backgroundColor}
{title}
{video}
action={clickAction}
eyebrow={heading}
subtitle={inlineDescription}
pinArtworkToVerticalMiddle={true}
pinArtworkToHorizontalEnd={true}
pinTextToVerticalStart={isRtl()}
profileOverride={profile}
isMediaDark={item.style !== 'white'}
/>
|
