1  <script lang="ts">
 2      import {
 3          type ProductPageLink,
 4          isFlowAction,
 5      } from '@jet-app/app-store/api/models';
 6      import { isExternalUrlAction } from '~/jet/models/';
 7      import FlowAction from '~/components/jet/action/FlowAction.svelte';
 8      import ExternalURLAction from '~/components/jet/action/ExternalUrlAction.svelte';
 9  
10      export let item: ProductPageLink;
11  
12      const clickAction = item.clickAction;
13  
14      $: canRenderContainer =
15          isFlowAction(clickAction) || isExternalUrlAction(clickAction);
16  </script>
17  
18  {#if canRenderContainer}
19      <div class="product-link-container">
20          {#if isFlowAction(clickAction)}
21              <FlowAction destination={clickAction}>
22                  {item.text}
23              </FlowAction>
24          {:else if isExternalUrlAction(clickAction)}
25              <ExternalURLAction destination={clickAction}>
26                  {item.text}
27              </ExternalURLAction>
28          {/if}
29      </div>
30  {/if}
31  
32  <style>
33      .product-link-container {
34          @media (--range-xsmall-down) {
35              padding: 10px 0;
36          }
37      }
38  
39      .product-link-container :global(a) {
40          display: inline-flex;
41          align-items: center;
42          color: var(--keyColor);
43          text-decoration: none;
44          gap: 6px;
45  
46          &:hover {
47              text-decoration: underline;
48          }
49  
50          @media (--range-xsmall-down) {
51              font-size: 18px;
52              gap: 8px;
53          }
54      }
55  
56      .product-link-container :global(a) :global(.external-link-arrow) {
57          width: 7px;
58          height: 7px;
59          fill: var(--keyColor);
60          margin-top: 3px;
61  
62          @media (--range-xsmall-down) {
63              width: 10px;
64              height: 10px;
65              margin-top: 2px;
66          }
67      }
68  </style>