blob: a6db985bec53715fc670e8f5e5181731cc9b05af (
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
|
<script lang="ts" context="module">
import type {
TodayCardMedia,
TodayCardMediaAppIcon,
} from '@jet-app/app-store/api/models';
export function isTodayCardMediAppIcon(
media: TodayCardMedia,
): media is TodayCardMediaAppIcon {
return media.kind === 'appIcon';
}
</script>
<script lang="ts">
import AppIcon from '~/components/AppIcon.svelte';
import { colorAsString } from '~/utils/color';
export let media: TodayCardMediaAppIcon;
$: backgroundColor = media.icon.backgroundColor
? colorAsString(media.icon.backgroundColor)
: null;
</script>
<div class="container" style:--background-color={backgroundColor}>
<div class="artwork-container">
<AppIcon
icon={media.icon}
profile="app-icon-xlarge"
fixedWidth={false}
/>
</div>
</div>
<style>
.container {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--background-color);
border-radius: var(--today-card-border-radius);
}
.artwork-container {
width: 50%;
height: 50%;
}
@container (orientation: landscape) {
.container {
align-items: start;
padding-top: 5%;
}
.artwork-container {
width: 30%;
height: 30%;
}
}
</style>
|
