1  <script lang="ts" context="module">
 2      import type { Badge, BadgeType } from '@jet-app/app-store/api/models';
 3  
 4      const ARTWORK_TYPE: BadgeType = 'artwork';
 5      const CONTENT_RATING_TYPE: BadgeType = 'contentRating';
 6      const CONTENT_RATING_KEY = 'contentRating';
 7  
 8      interface ContentRatingBadge extends Badge {
 9          type: typeof CONTENT_RATING_TYPE;
10      }
11  
12      export function isContentRatingBadge(
13          badge: Badge,
14      ): badge is ContentRatingBadge {
15          return (
16              badge.type === CONTENT_RATING_TYPE ||
17              (badge.key === CONTENT_RATING_KEY && badge.type === ARTWORK_TYPE)
18          );
19      }
20  </script>
21  
22  <script lang="ts">
23      import SystemImage, {
24          isSystemImageArtwork,
25      } from '~/components/SystemImage.svelte';
26  
27      export let badge: ContentRatingBadge;
28  
29      $: ({ artwork, accessibilityTitle } = badge);
30  </script>
31  
32  {#if artwork && isSystemImageArtwork(artwork)}
33      <div class="pictogram-container" aria-label={accessibilityTitle}>
34          <SystemImage {artwork} />
35      </div>
36  {:else}
37      <span>
38          {badge.content.contentRating}
39      </span>
40  {/if}
41  
42  <style>
43      span {
44          height: 25px;
45          margin: 4px 0 2px;
46          font: var(--title-1-emphasized);
47          color: var(--color);
48      }
49  
50      .pictogram-container {
51          height: 25px;
52          padding: 2px;
53          aspect-ratio: 1/1;
54          margin: 4px 0 2px;
55      }
56  
57      .pictogram-container :global(svg) {
58          width: 21px;
59          height: 21px;
60      }
61  </style>