blob: 8b934533949c1d2db5520a894866b8431025a327 (
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
|
<script lang="ts">
import type { ImageLockup } from '@jet-app/app-store/api/models';
import LineClamp from '@amp/web-app-components/src/components/LineClamp/LineClamp.svelte';
import AppIcon from '~/components/AppIcon.svelte';
import Artwork from '~/components/Artwork.svelte';
import GradientOverlay from '~/components/GradientOverlay.svelte';
import HoverWrapper from '~/components/HoverWrapper.svelte';
import LinkWrapper from '~/components/LinkWrapper.svelte';
import { colorAsString } from '~/utils/color';
export let item: ImageLockup;
const color: string = item.artwork.backgroundColor
? colorAsString(item.artwork.backgroundColor)
: '#000';
</script>
<LinkWrapper action={item.lockup.clickAction}>
<div class="container">
<HoverWrapper>
<div class="artwork-container">
<Artwork artwork={item.artwork} profile="brick" />
</div>
{#if item.lockup}
<div
class="lockup-container"
class:on-dark={item.isDark}
class:on-light={!item.isDark}
>
{#if item.lockup.icon}
<div class="app-icon-container">
<AppIcon icon={item.lockup.icon} />
</div>
{/if}
<div class="metadata-container">
{#if item.lockup.heading}
<LineClamp clamp={1}>
<p class="eyebrow">{item.lockup.heading}</p>
</LineClamp>
{/if}
{#if item.lockup.title}
<LineClamp clamp={2}>
<h3>{item.lockup.title}</h3>
</LineClamp>
{/if}
{#if item.lockup.subtitle}
<LineClamp clamp={1}>
<p class="subtitle">{item.lockup.subtitle}</p>
</LineClamp>
{/if}
</div>
</div>
{/if}
<GradientOverlay --color={color} --height="90%" />
</HoverWrapper>
</div>
</LinkWrapper>
<style>
.artwork-container {
width: 100%;
}
.container {
container-type: inline-size;
container-name: container;
}
.lockup-container {
position: absolute;
z-index: 2;
bottom: 0;
display: flex;
align-items: center;
width: 100%;
padding: 0 20px 20px;
}
.lockup-container.on-dark {
color: var(--systemPrimary-onDark);
}
.lockup-container.on-light {
color: var(--systemPrimary-onLight);
}
@container container (max-width: 260px) {
.lockup-container {
padding: 0 10px 10px;
}
}
.app-icon-container {
flex-shrink: 0;
width: 48px;
margin-inline-end: 8px;
}
h3 {
font: var(--title-3-emphasized);
}
.eyebrow {
font: var(--subhead-emphasized);
text-transform: uppercase;
mix-blend-mode: plus-lighter;
}
.subtitle {
font: var(--callout-emphasized);
}
</style>
|
