1405/02/09-change style in configuration page

src/pages/menuPages/configuration/components/SwitchConfigs.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="flex-wrap mb-2 flex justify-between items-center border-1 border-gray-300 border-solid rounded-lg p-3">
+    <div class="flex flex-col justify-between ">
+      <div class=" font-bold">{{ item.name }}</div>
+      <div class=" text-xs ">کلید: {{ item.key }}</div>
+    </div>
+
+    <div class="flex">
+      <a-switch
+        checked-children="فعال"
+        un-checked-children="غیرفعال"
+        v-model:checked="value"
+        @change="ok"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { Order } from '@/model/order'
+import { loading } from '@/utils'
+import { setConfiguration } from '@/api/configuration'
+import { message } from 'ant-design-vue'
+import { onMounted } from 'vue'
+
+interface Prop {
+  item: Order
+}
+
+const props = defineProps<Prop>()
+const value = ref<string>('false')
+
+async function ok() {
+  let obj = {
+    id: props.item.id,
+    key: props.item.key,
+    value: value.value,
+    description: props.item.description
+  }
+  try {
+    loading.value = true
+    await setConfiguration(obj)
+    message.success('تغییر با موفقیت انجام شد')
+  } catch (e) {
+    console.error(e)
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(() => (value.value = props.item.value === 'true'))
+</script>