vue components refactoring

resources/js/components/UI/Others/AlertBox.vue

@@ -0,0 +1,52 @@
+<template>
+    <div
+		class="mb-6 flex cursor-pointer items-center rounded-xl p-5 shadow-card"
+		:class="{
+			'dark:bg-green-700/30 bg-green-200': color === 'green',
+			'dark:bg-rose-700/30 bg-rose-200': color === 'rose',
+		}"
+	>
+		<refresh-cw-icon
+			v-if="isLoading"
+			size="18"
+			class="vue-feather mr-4 shrink-0 animate-spin"
+			:class="{
+				'text-green-700 dark:text-green-500': color === 'green',
+				'text-rose-700 dark:text-rose-500': color === 'rose',
+			}"
+		/>
+        <alert-octagon-icon
+			v-if="!isLoading"
+			size="18"
+			class="vue-feather mr-4 shrink-0"
+			:class="{
+				'text-green-700 dark:text-green-500': color === 'green',
+				'text-rose-700 dark:text-rose-500': color === 'rose',
+			}"
+		/>
+        <p
+			class="text-sm text-green-700 dark:text-green-500"
+			:class="{
+				'text-green-700 dark:text-green-500': color === 'green',
+				'text-rose-700 dark:text-rose-500': color === 'rose',
+			}"
+		>
+            <slot />
+        </p>
+    </div>
+</template>
+<script>
+	import {AlertOctagonIcon, RefreshCwIcon} from "vue-feather-icons";
+
+	export default {
+		name: 'AlertBox',
+		props: [
+			'isLoading',
+			'color',
+		],
+		components: {
+			AlertOctagonIcon,
+			RefreshCwIcon,
+		}
+	}
+</script>