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" context="module">
import type {
TodayCard,
TodayCardMediaRiver,
} from '@jet-app/app-store/api/models';
export interface TodayCardWithMediaRiver extends TodayCard {
media: TodayCardMediaRiver;
}
export function isSmallStoryCardWithMediaRiver(
item: TodayCard,
): item is TodayCardWithMediaRiver {
return !!item.media && item.media.kind === 'river';
}
</script>
<script lang="ts">
import type { Opt } from '@jet/environment/types/optional';
import HoverWrapper from '~/components/HoverWrapper.svelte';
import LinkWrapper from '~/components/LinkWrapper.svelte';
import AppIconRiver from '~/components/AppIconRiver.svelte';
import {
getBackgroundGradientCSSVarsFromArtworks,
getLuminanceForRGB,
} from '~/utils/color';
export let item: TodayCardWithMediaRiver;
$: icons = item.media.lockups.map((lockup) => lockup.icon);
$: backgroundGradientCssVars = getBackgroundGradientCSSVarsFromArtworks(
icons,
{
// sorts from darkest to lightest
sortFn: (a, b) => getLuminanceForRGB(a) - getLuminanceForRGB(b),
},
);
let title: Opt<string>;
let eyebrow: Opt<string>;
$: {
eyebrow = item.heading;
title = item.title;
if (item.inlineDescription) {
eyebrow = item.title;
title = item.inlineDescription;
}
}
</script>
<LinkWrapper action={item.clickAction}>
<HoverWrapper>
<div class="river-container" style={backgroundGradientCssVars}>
<AppIconRiver {icons} profile="app-icon" />
</div>
</HoverWrapper>
<div class="text-container">
{#if eyebrow}
<h4>{eyebrow}</h4>
{/if}
{#if title}
<h3>{title}</h3>
{/if}
</div>
</LinkWrapper>
<style>
.river-container {
--app-icon-river-icon-width: 48px;
display: flex;
flex-direction: column;
justify-content: center;
aspect-ratio: 16 / 9;
width: 100%;
border-radius: 8px;
background: radial-gradient(
circle at 3% -50%,
var(--top-left, #000) 20%,
transparent 70%
),
radial-gradient(
circle at -50% 120%,
var(--bottom-left, #000) 40%,
transparent 80%
),
radial-gradient(
circle at 140% -50%,
var(--top-right, #000) 60%,
transparent 80%
),
radial-gradient(
circle at 62% 100%,
var(--bottom-right, #000) 50%,
transparent 100%
);
}
.river-container :global(.app-icons:last-of-type) {
margin-bottom: 0;
}
.text-container {
margin-top: 8px;
}
h3 {
font: var(--title-3);
}
h4 {
margin-bottom: 2px;
font: var(--callout-emphasized);
color: var(--systemSecondary);
}
</style>
|
