blob: 29b7196363935613559a967740f90709eea108ff (
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
|
<script lang="ts">
import type { InAppPurchaseLockup } from '@jet-app/app-store/api/models';
import LineClamp from '@amp/web-app-components/src/components/LineClamp/LineClamp.svelte';
import Artwork from '~/components/Artwork.svelte';
import PlusIcon from '~/sf-symbols/plus.heavy.svg';
export let item: InAppPurchaseLockup;
</script>
<article>
<div class="artwork-container">
<PlusIcon class="plus-icon" aria-hidden="true" />
<Artwork artwork={item.icon} profile="in-app-purchase" />
</div>
<div class="metadata-container">
{#if item.title}
<LineClamp clamp={1}>
<h3>{item.title}</h3>
</LineClamp>
{/if}
{#if item.productDescription}
<LineClamp clamp={1}>
<p>{item.productDescription}</p>
</LineClamp>
{/if}
{#if item.offerDisplayProperties.titles}
<p>
{item.offerDisplayProperties.titles.discountUnownedParent ||
item.offerDisplayProperties.titles.standard}
</p>
{/if}
</div>
</article>
<style>
.artwork-container {
position: relative;
flex-shrink: 0;
width: 100%;
margin-bottom: 8px;
padding: 8%;
border-radius: var(--global-border-radius-small);
background: var(--systemQuinary);
}
.artwork-container :global(.plus-icon) {
position: absolute;
top: 6%;
width: 9%;
inset-inline-end: 5%;
}
.artwork-container :global(.artwork-component) {
border-radius: var(--global-border-radius-small) 43%
var(--global-border-radius-small) var(--global-border-radius-small);
}
.metadata-container {
margin-inline-end: 16px;
}
h3 {
font: var(--body-tall);
}
p {
font: var(--callout-tall);
color: var(--systemSecondary);
}
</style>
|
