From 66d86137d7618982961dc6bf71f4692b0b7a8ae8 Mon Sep 17 00:00:00 2001
From: Felipe Yslaoker <felipeyslaok@gmail.com>
Date: Wed, 13 Nov 2024 11:10:54 -0300
Subject: [PATCH] updated: url flow

---
 components/Ly/FilledButton.vue | 18 +++++++++++++++++-
 pages/index.vue                |  9 ++-------
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/components/Ly/FilledButton.vue b/components/Ly/FilledButton.vue
index 77fb93f..57c0d00 100644
--- a/components/Ly/FilledButton.vue
+++ b/components/Ly/FilledButton.vue
@@ -5,20 +5,27 @@ const props = withDefaults(
   defineProps<{
     disabled?: boolean | undefined;
     loading?: boolean | undefined;
+    url?: string;
   }>(),
   {
     theme: undefined,
     disabled: false,
     loading: false,
+    url: undefined,
   },
 );
 
+const { openUrl } = useOpenUrl();
 const emit = defineEmits(['click']);
 
-function onClick() {
+function onClick(event: MouseEvent) {
   if (!props.disabled && !props.loading) {
     emit('click');
   }
+  if (props.url) {
+    event.preventDefault();
+    openUrl(props.url);
+  }
 }
 
 const isFocused = ref(false);
@@ -33,7 +40,12 @@ function handleBlur() {
 </script>
 
 <template>
+  <a v-if="url" :href="url" class="ly-filled-button" @click="onClick">
+    <LyCircularProgress v-if="loading" color="on-primary-color-border-top" />
+    <slot v-else />
+  </a>
   <button
+    v-else
     :class="['ly-filled-button']"
     :disabled="disabled"
     @click="onClick"
@@ -47,4 +59,8 @@ function handleBlur() {
 
 <style scoped lang="scss">
 @use '@/assets/scss/ui/buttons/LyFilledButton.scss';
+
+a.ly-filled-button {
+  text-decoration: none;
+}
 </style>
diff --git a/pages/index.vue b/pages/index.vue
index e72d6d8..ad066fc 100644
--- a/pages/index.vue
+++ b/pages/index.vue
@@ -2,8 +2,6 @@
 definePageMeta({
   layout: 'default',
 });
-
-const { openUrl } = useOpenUrl();
 </script>
 
 <template>
@@ -30,15 +28,12 @@ const { openUrl } = useOpenUrl();
           class="d-flex justify-center mt-3 flex-col flex-md-row"
           style="gap: 4px"
         >
-          <LyFilledButton
-            class="width-md-45"
-            @click="openUrl('https://t.me/MusilyApp')"
-          >
+          <LyFilledButton class="width-md-45" url="https://t.me/MusilyApp">
             Telegram Channel
           </LyFilledButton>
           <LyFilledButton
             class="width-md-45"
-            @click="openUrl('https://github.com/MusilyApp')"
+            url="https://github.com/MusilyApp"
           >
             Github
           </LyFilledButton>