refactor: add more customize option

src/components/home/PersonCard.vue

@@ -1,9 +1,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
+import { Icon } from '@iconify/vue';
 
 import AppBox from 'components/app/AppBox.vue';
-import AppCircle from '../app/AppCircle.vue';
-import { Icon } from '@iconify/vue';
+import AppCircle from 'components/app/AppCircle.vue';
 
 defineProps<{
   list: {
@@ -16,6 +16,9 @@ defineProps<{
     badge?: string;
     img?: string;
   }[];
+  gridColumns?: number;
+  noHover?: boolean;
+  noAction?: boolean;
   detailColumnCount?: number;
 }>();
 
@@ -31,20 +34,29 @@ const status = ref(false);
   <div
     class="person-container"
     :style="`grid-template-columns: repeat( ${
-      $q.screen.gt.sm ? '4, 1fr' : $q.screen.gt.xs ? '2, 1fr' : '1, 1fr'
+      gridColumns
+        ? `${gridColumns}, 1fr`
+        : $q.screen.gt.sm
+          ? '4, 1fr'
+          : $q.screen.gt.xs
+            ? '2, 1fr'
+            : '1, 1fr'
     })`"
   >
     <AppBox
       bordered
       class="column person-box"
-      :class="{ 'person-box__disabled': v.disabled }"
+      :class="{
+        'person-box__disabled': v.disabled,
+        'person-box__no-hover': noHover,
+      }"
       style="padding: 0"
       v-for="(v, i) in list"
       :key="i"
     >
       <div class="q-pa-sm column items-center">
         <!-- kebab menu -->
-        <div class="full-width text-right">
+        <div class="full-width text-right" v-if="!noAction">
           <q-btn flat round padding="sm" icon="mdi-dots-vertical" size="sm">
             <q-menu :offset="[0, 10]" style="width: 130px">
               <q-list>
@@ -266,7 +278,7 @@ const status = ref(false);
     align-items: center;
   }
 
-  &:not(.person-box__disabled):hover {
+  &:not(.person-box__disabled):not(.person-box__no-hover):hover {
     --_hover: hsl(var(--gender-male));
     cursor: pointer;
     box-shadow: var(--shadow-2);