vue components refactoring

resources/js/components/UI/Buttons/AuthButton.vue

@@ -0,0 +1,47 @@
+<template>
+    <button
+        class="group mx-auto inline-block flex items-center whitespace-nowrap rounded-lg border-2 border-black px-7 py-2.5 dark:border-gray-300"
+    >
+        <span class="pr-1 text-lg font-extrabold">
+            {{ text }}
+        </span>
+        <refresh-cw-icon v-if="loading" size="20" class="vue-feather text-theme sync-alt -mr-1" />
+        <chevron-right-icon v-if="!loading && icon" size="20" class="vue-feather text-theme -mr-1" />
+    </button>
+</template>
+
+<script>
+import { ChevronRightIcon, RefreshCwIcon } from 'vue-feather-icons'
+
+export default {
+    name: 'AuthContent',
+    props: ['loading', 'icon', 'text'],
+    components: {
+        ChevronRightIcon,
+        RefreshCwIcon,
+    },
+    data() {
+        return {
+            isVisible: false,
+        }
+    },
+    created() {
+        this.isVisible = this.visible
+    },
+}
+</script>
+
+<style scoped lang="scss">
+.sync-alt {
+    animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+    0% {
+        transform: rotate(0);
+    }
+    100% {
+        transform: rotate(360deg);
+    }
+}
+</style>