noway.gabb.fr
this repo has no description
1<script lang="ts" context="module">
2 export function isShareSupported() {
3 return (
4 typeof navigator !== 'undefined' &&
5 typeof navigator.share === 'function'
6 );
7 }
8</script>
9
10<script lang="ts">
11 import SFSymbol from '~/components/SFSymbol.svelte';
12 import { getI18n } from '~/stores/i18n';
13
14 export let url: string;
15 export let withLabel: boolean = false;
16
17 const i18n = getI18n();
18
19 $: isShareSheetOpen = false;
20
21 async function handleShareClick() {
22 isShareSheetOpen = !isShareSheetOpen;
23
24 try {
25 await navigator.share({ url });
26 isShareSheetOpen = false;
27 } catch {
28 isShareSheetOpen = false;
29 }
30 }
31</script>
32
33<button
34 on:click={handleShareClick}
35 aria-label={$i18n.t('ASE.Web.AppStore.Share.Button.AccessibilityValue')}
36 class:active={isShareSheetOpen}
37 class:with-label={withLabel}
38>
39 <SFSymbol name="square.and.arrow.up" ariaHidden={true} />
40
41 {#if withLabel}
42 {$i18n.t('ASE.Web.AppStore.Share.Button.Value')}
43 {/if}
44</button>
45
46<style lang="scss">
47 button {
48 position: relative;
49 z-index: 2;
50 display: flex;
51 align-items: center;
52 justify-content: center;
53 flex-shrink: 0;
54 width: var(--share-arrow-size, 32px);
55 height: var(--share-arrow-size, 32px);
56 border-radius: var(--share-arrow-size, 32px);
57 background: var(--systemQuaternary-onDark);
58 transition: background-color 210ms ease-out;
59 mix-blend-mode: plus-lighter;
60 }
61
62 button.with-label {
63 display: flex;
64 align-items: center;
65 width: auto;
66 padding: 0 16px;
67 gap: 8px;
68 font: var(--body-emphasized);
69
70 :global(svg) {
71 height: 16px;
72 width: auto;
73 top: -2px;
74 position: relative;
75 }
76 }
77
78 button.active,
79 button:hover {
80 // stylelint-disable color-function-notation
81 background-color: rgb(from var(--systemTertiary-onDark) r g b/.13);
82 // stylelint-enable color-function-notation
83 }
84
85 button :global(svg) {
86 width: 37%;
87 fill: var(--systemPrimary-onDark);
88 overflow: visible;
89 }
90</style>