this repo has no description
noway.gabb.fr
1<script lang="ts">
2 import ArrowIcon from '@amp/web-app-components/assets/icons/arrow.svg';
3 import LineClamp from '@amp/web-app-components/src/components/LineClamp/LineClamp.svelte';
4 import { getJet } from '~/jet';
5 import { getI18n } from '~/stores/i18n';
6 import { launchAppOnMac } from '~/utils/launch-client';
7
8 export let url: string;
9
10 const i18n = getI18n();
11 const jet = getJet();
12
13 function handleButtonClick(event: MouseEvent) {
14 // Need to call both event.preventDefault() and event.stopPropagation()
15 // to prevent navigation to the production page on web
16 event.preventDefault();
17 event.stopPropagation();
18
19 if (url) {
20 launchAppOnMac(url);
21 jet.recordCustomMetricsEvent({
22 eventType: 'click',
23 targetId: 'OpenInMacAppStore',
24 targetType: 'button',
25 actionType: 'open',
26 });
27 }
28 }
29</script>
30
31<button
32 class="get-button blue"
33 aria-label={$i18n.t('ASE.Web.AppStore.CTA.MacAppStore.AX')}
34 on:click={handleButtonClick}
35>
36 <LineClamp clamp={1}>
37 {$i18n.t('ASE.Web.AppStore.CTA.MacAppStore.Action')}
38 <span>
39 {$i18n.t('ASE.Web.AppStore.CTA.MacAppStore.App')}
40 </span>
41 </LineClamp>
42 <ArrowIcon class="external-link-arrow" aria-hidden="true" />
43</button>
44
45<style lang="scss">
46 @use '@amp/web-shared-styles/sasskit-stylekit/ac-sasskit-config';
47 @use 'ac-sasskit/core/locale' as *;
48
49 button {
50 display: inline-flex;
51 }
52
53 button span {
54 font-weight: 500;
55 }
56
57 button :global(.external-link-arrow) {
58 align-self: center;
59 width: var(--launch-native-button-arrow-size, 9px);
60 height: var(--launch-native-button-arrow-size, 9px);
61 padding-top: 1px;
62 margin-inline-start: 4px;
63 fill: var(--systemPrimary-onDark);
64
65 @include rtl {
66 transform: rotate(-90deg);
67 }
68 }
69</style>