1  <script lang="ts">
  2      import type { ImageLockup } from '@jet-app/app-store/api/models';
  3  
  4      import LineClamp from '@amp/web-app-components/src/components/LineClamp/LineClamp.svelte';
  5      import AppIcon from '~/components/AppIcon.svelte';
  6      import Artwork from '~/components/Artwork.svelte';
  7      import GradientOverlay from '~/components/GradientOverlay.svelte';
  8      import HoverWrapper from '~/components/HoverWrapper.svelte';
  9      import LinkWrapper from '~/components/LinkWrapper.svelte';
 10      import { colorAsString } from '~/utils/color';
 11  
 12      export let item: ImageLockup;
 13  
 14      const color: string = item.artwork.backgroundColor
 15          ? colorAsString(item.artwork.backgroundColor)
 16          : '#000';
 17  </script>
 18  
 19  <LinkWrapper action={item.lockup.clickAction}>
 20      <div class="container">
 21          <HoverWrapper>
 22              <div class="artwork-container">
 23                  <Artwork artwork={item.artwork} profile="brick" />
 24              </div>
 25  
 26              {#if item.lockup}
 27                  <div
 28                      class="lockup-container"
 29                      class:on-dark={item.isDark}
 30                      class:on-light={!item.isDark}
 31                  >
 32                      {#if item.lockup.icon}
 33                          <div class="app-icon-container">
 34                              <AppIcon icon={item.lockup.icon} />
 35                          </div>
 36                      {/if}
 37  
 38                      <div class="metadata-container">
 39                          {#if item.lockup.heading}
 40                              <LineClamp clamp={1}>
 41                                  <p class="eyebrow">{item.lockup.heading}</p>
 42                              </LineClamp>
 43                          {/if}
 44  
 45                          {#if item.lockup.title}
 46                              <LineClamp clamp={2}>
 47                                  <h3>{item.lockup.title}</h3>
 48                              </LineClamp>
 49                          {/if}
 50  
 51                          {#if item.lockup.subtitle}
 52                              <LineClamp clamp={1}>
 53                                  <p class="subtitle">{item.lockup.subtitle}</p>
 54                              </LineClamp>
 55                          {/if}
 56                      </div>
 57                  </div>
 58              {/if}
 59  
 60              <GradientOverlay --color={color} --height="90%" />
 61          </HoverWrapper>
 62      </div>
 63  </LinkWrapper>
 64  
 65  <style>
 66      .artwork-container {
 67          width: 100%;
 68      }
 69  
 70      .container {
 71          container-type: inline-size;
 72          container-name: container;
 73      }
 74  
 75      .lockup-container {
 76          position: absolute;
 77          z-index: 2;
 78          bottom: 0;
 79          display: flex;
 80          align-items: center;
 81          width: 100%;
 82          padding: 0 20px 20px;
 83      }
 84  
 85      .lockup-container.on-dark {
 86          color: var(--systemPrimary-onDark);
 87      }
 88  
 89      .lockup-container.on-light {
 90          color: var(--systemPrimary-onLight);
 91      }
 92  
 93      @container container (max-width: 260px) {
 94          .lockup-container {
 95              padding: 0 10px 10px;
 96          }
 97      }
 98  
 99      .app-icon-container {
100          flex-shrink: 0;
101          width: 48px;
102          margin-inline-end: 8px;
103      }
104  
105      h3 {
106          font: var(--title-3-emphasized);
107      }
108  
109      .eyebrow {
110          font: var(--subhead-emphasized);
111          text-transform: uppercase;
112          mix-blend-mode: plus-lighter;
113      }
114  
115      .subtitle {
116          font: var(--callout-emphasized);
117      }
118  </style>