1  <script lang="ts" context="module">
 2      import type {
 3          TodayCard,
 4          TodayCardMediaBrandedSingleApp,
 5      } from '@jet-app/app-store/api/models';
 6  
 7      export interface SmallStoryCardMediaBrandedSingleApp extends TodayCard {
 8          media: TodayCardMediaBrandedSingleApp;
 9      }
10  
11      export function isSmallStoryCardMediaBrandedSingleApp(
12          item: TodayCard,
13      ): item is SmallStoryCardMediaBrandedSingleApp {
14          return !!item.media && item.media.kind === 'brandedSingleApp';
15      }
16  </script>
17  
18  <script lang="ts">
19      import Artwork from '~/components/Artwork.svelte';
20      import HoverWrapper from '~/components/HoverWrapper.svelte';
21      import LinkWrapper from '~/components/LinkWrapper.svelte';
22  
23      export let item: SmallStoryCardMediaBrandedSingleApp;
24  
25      $: artwork = item.media.artworks?.[0] || item.media.icon;
26  </script>
27  
28  <article>
29      <LinkWrapper action={item.clickAction}>
30          <HoverWrapper element="div">
31              <Artwork {artwork} profile="brick" useCropCodeFromArtwork={false} />
32          </HoverWrapper>
33  
34          <div class="text-container">
35              <h4>{item.heading}</h4>
36              <h3>{item.title}</h3>
37              <p>{item.inlineDescription}</p>
38          </div>
39      </LinkWrapper>
40  </article>
41  
42  <style>
43      article {
44          aspect-ratio: 16/9;
45      }
46  
47      .text-container {
48          gap: 4px;
49          display: flex;
50          flex-direction: column;
51          margin-top: 8px;
52      }
53  
54      h3 {
55          font: var(--title-3);
56      }
57  
58      h4 {
59          margin-bottom: 2px;
60          font: var(--callout-emphasized);
61          color: var(--systemSecondary);
62      }
63  
64      p {
65          font: var(--body-tall);
66          color: var(--systemSecondary);
67          text-wrap: pretty;
68      }
69  </style>