resolve confict

components/common/button/ActionButtons.vue

@@ -1,18 +1,10 @@
 <template>
-	<div class="d-flex flex-column justify-center align-center" style="gap: 12px">
+	<div class="d-flex justify-center align-center" 
+		:class="directionBtn === 'vertically'?'flex-row':'flex-column'" 
+		style="gap: 12px">
 		<a-button @click="btnActionsFnc('removeRightToLeft')" type="primary" ghost :icon="icons.remove" >
 		</a-button>
-
-		<!--<v-btn
-			icon
-			tile
-			:ripple="false"
-			class="mt-2"
-			@click="btnActionsFnc('removeRightToLeft')"
-		>
-			<v-icon>mdi-chevron-left</v-icon>
-		</v-btn> -->
-		<a-button   @click="btnActionsFnc('addLeftToRight')" type="primary" ghost icon="down">
+		<a-button   @click="btnActionsFnc('addLeftToRight')" type="primary" ghost :icon="icons.add">
 		</a-button>
 	</div>
 </template>
@@ -35,8 +27,18 @@ export default {
 			type: Function,
 			required: true,
 		},
+		directionBtn: {
+			type: String,
+			default: "horizontally" //horizontally, vertically.
+		}
+	},
+	computed: {
+		icons() {
+			return this.directionBtn === "vertically"
+				? { remove: "up", add: "down" }
+				: { remove: "left", add: "right" };
+			},
 	},
-	computed: {},
 	data() {
 		return {};
 	},