1  <script lang="ts">
 2      import {
 3          type ProductCapability,
 4          type ProductCapabilityType,
 5      } from '@jet-app/app-store/api/models';
 6  
 7      import LineClamp from '@amp/web-app-components/src/components/LineClamp/LineClamp.svelte';
 8      import LinkableTextItem from '~/components/jet/item/LinkableTextItem.svelte';
 9  
10      type CapabilityIcons = Record<ProductCapabilityType, string | undefined>;
11  
12      const capabilityIcons: CapabilityIcons = {
13          gameCenter: '/assets/images/supports/supports-GameCenter@2x.png',
14          siri: '/assets/images/supports/supports-Siri@2x.png',
15          wallet: '/assets/images/supports/supports-Wallet@2x.png',
16          controllers: '/assets/images/supports/supports-GameController@2x.png',
17          familySharing: '/assets/images/supports/supports-FamilySharing@2x.png',
18          sharePlay: '/assets/images/supports/supports-Shareplay@2x.png',
19          spatialControllers:
20              '/assets/images/supports/supports-SpatialController@2x.png',
21          safariExtensions: '/assets/images/supports/supports-Safari@2x.png',
22      };
23  
24      export let item: ProductCapability;
25  </script>
26  
27  <article>
28      <div class="capability-icon-container">
29          <img
30              src={capabilityIcons[item.type]}
31              class="capability-icon"
32              alt=""
33              aria-hidden="true"
34          />
35      </div>
36  
37      <div class="metadata-container">
38          <LineClamp clamp={1}>
39              <h3>{item.title}</h3>
40          </LineClamp>
41  
42          <p>
43              <LinkableTextItem item={item.caption} />
44          </p>
45      </div>
46  </article>
47  
48  <style>
49      article {
50          display: flex;
51          align-items: center;
52      }
53  
54      .capability-icon-container {
55          flex-shrink: 0;
56          width: 48px;
57          margin-inline-end: 16px;
58      }
59  
60      .capability-icon {
61          margin-top: 2px;
62          min-width: 46px;
63          height: 46px;
64      }
65  
66      .metadata-container {
67          margin-inline-end: 16px;
68      }
69  
70      .metadata-container :global(a) {
71          color: var(--keyColor);
72      }
73  
74      h3 {
75          color: var(--systemPrimary);
76          font-size: 1em;
77          margin-bottom: 1px;
78      }
79  
80      p {
81          color: var(--systemSecondary);
82          font: var(--body-tall);
83      }
84  </style>