changes

app/components/common/Avatarbox.vue

@@ -1,28 +1,22 @@
+<script setup>
+const props = defineProps({
+  text: String,
+  image: String,
+  type: String,
+  size: Number
+});
+</script>
 <template>  
-    <div :class="`cbox-${type}-${size} mx-0 px-0`" @click="$emit('justclick')" :style="image? 'border: none' : ''">
-      <figure class="image" v-if="image">
+  <div
+    @click="$emit('justclick')"
+    class="rounded-full mx-0 px-0 size-10 font-bold is-flex is-justify-content-center is-align-items-center"
+    :style="{
+      border: image ? 'none' : '1px solid #e4e4e4'
+    }"
+  >
+    <figure v-if="image" class="image">
       <img class="is-rounded" :src="`${$path()}download?name=${image}`">
     </figure>
-    <div v-else>
-      <span>{{text}}</span>
-      </div>
-    </div>
+    <span v-else>{{text}}</span>
+  </div>
 </template>
-<script>
-  export default {
-    props: ['text', 'image', 'type', 'size'] 
-  }
-</script>
-<style>
-.cbox-findata-two {
-  font-size: 16px;
-  font-weight: bold;
-  width: 34px;
-  height: 34px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border: 1px solid #e4e4e4;
-  border-radius: 50%;
-}
-</style>