1  <script lang="ts">
  2      import type { Lockup } from '@jet-app/app-store/api/models';
  3  
  4      import LineClamp from '@amp/web-app-components/src/components/LineClamp/LineClamp.svelte';
  5      import AppIcon, { type AppIconProfile } from '~/components/AppIcon.svelte';
  6      import LinkWrapper from '~/components/LinkWrapper.svelte';
  7      import { getI18n } from '~/stores/i18n';
  8  
  9      export let item: Lockup;
 10  
 11      /**
 12       * Controls the `get-button` variant class that is applied to the "View" button
 13       *
 14       * @default "gray"
 15       */
 16      export let buttonVariant: 'gray' | 'blue' | 'transparent' = 'gray';
 17      export let shouldShowLaunchNativeButton: boolean = false;
 18      export let titleLineCount: number = 2;
 19      export let appIconProfile: AppIconProfile = 'app-icon-small';
 20  
 21      const i18n = getI18n();
 22  </script>
 23  
 24  <div class="small-lockup-item">
 25      <LinkWrapper
 26          action={item.clickAction}
 27          label={`${$i18n.t('ASE.Web.AppStore.View')} ${
 28              item.title ? item.title : null
 29          }`}
 30      >
 31          {#if item.icon}
 32              <div class="app-icon-container">
 33                  <AppIcon icon={item.icon} profile={appIconProfile} />
 34              </div>
 35          {/if}
 36  
 37          <div class="metadata-container">
 38              {#if item.heading}
 39                  <LineClamp clamp={1}>
 40                      <h4 dir="auto">{item.heading}</h4>
 41                  </LineClamp>
 42              {/if}
 43  
 44              {#if item.title}
 45                  <LineClamp clamp={titleLineCount}>
 46                      <h3 dir="auto">{item.title}</h3>
 47                  </LineClamp>
 48              {/if}
 49  
 50              {#if item.subtitle}
 51                  <LineClamp clamp={1}>
 52                      <p dir="auto">{item.subtitle}</p>
 53                  </LineClamp>
 54              {/if}
 55          </div>
 56  
 57          <div class="button-container" aria-hidden="true">
 58              {#if shouldShowLaunchNativeButton && $$slots['launch-native-button']}
 59                  <slot name="launch-native-button" />
 60              {:else}
 61                  <span class="get-button {buttonVariant}">
 62                      {$i18n.t('ASE.Web.AppStore.View')}
 63                  </span>
 64              {/if}
 65          </div>
 66      </LinkWrapper>
 67  </div>
 68  
 69  <style>
 70      .small-lockup-item,
 71      .small-lockup-item :global(a) {
 72          display: flex;
 73          align-items: center;
 74          width: 100%;
 75      }
 76  
 77      .app-icon-container {
 78          flex-shrink: 0;
 79          margin-inline-end: 16px;
 80      }
 81  
 82      .metadata-container {
 83          margin-inline-end: 16px;
 84      }
 85  
 86      h3 {
 87          color: var(--title-color);
 88          font: var(--title-3-emphasized);
 89      }
 90  
 91      h4 {
 92          color: var(--eyebrow-color, var(--systemSecondary));
 93          font: var(--subhead-emphasized);
 94          text-transform: uppercase;
 95          mix-blend-mode: var(--eyebrow-blend-mode);
 96      }
 97  
 98      p {
 99          font: var(--callout);
100          color: var(--subtitle-color, var(--systemSecondary));
101          mix-blend-mode: var(--subtitle-blend-mode);
102      }
103  
104      .button-container {
105          margin-inline-start: auto;
106          margin-inline-end: var(--margin-inline-end, 0);
107          mix-blend-mode: var(--button-blend-mode);
108          flex-shrink: 0;
109      }
110  </style>