blob: 94fe61dc5c5deca2e70179f3095d9a6693b56b73 (
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
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
|
<script lang="ts">
import type {
ArcadeFooter,
Artwork,
ImpressionableArtwork,
} from '@jet-app/app-store/api/models';
import { unwrapOptional as unwrap } from '@jet/environment/types/optional';
import AppleArcadeLogo from '~/components/icons/AppleArcadeLogo.svg';
import AppIconRiver from '~/components/AppIconRiver.svelte';
import LinkWrapper from '~/components/LinkWrapper.svelte';
export let item: ArcadeFooter;
$: action = unwrap(item.buttonAction);
function isImpressionableArtwork(
item: ImpressionableArtwork | Artwork,
): item is ImpressionableArtwork {
return 'art' in item;
}
// Sometimes data used to render an app icon is directly on `icon` but other times, in the case
// of `ImpressionableArtwork`, it's on `icon.art`. Here we are plucking the data no matter where it is.
const icons = (item.icons ?? []).map((icon) =>
isImpressionableArtwork(icon) ? icon.art : icon,
);
</script>
<LinkWrapper {action}>
<article>
{#if icons.length}
<AppIconRiver {icons} />
{/if}
<div class="metadata-container">
<div class="logo-container">
<AppleArcadeLogo />
</div>
<button class="get-button gray">
{action.title}
</button>
</div>
</article>
</LinkWrapper>
<style>
article {
--app-icon-river-speed: 120s;
display: flex;
overflow: hidden;
flex-flow: column;
padding: 20px 0 30px;
margin-bottom: 20px;
text-align: center;
border-radius: var(--global-border-radius-large);
background: var(--footerBg);
@media (--range-small-down) {
--app-icon-river-icon-width: 88px;
}
@media (--range-medium-up) {
--get-button-font: var(--title-3-emphasized);
}
}
.metadata-container {
display: flex;
align-items: center;
flex-flow: column;
gap: 20px;
}
.logo-container {
width: 128px;
@media (--range-small-down) {
width: 88px;
}
}
</style>
|
