Последняя версия с сервера прошлого разработчика

resources/js/Shared/Messanger/BoardFriendList.vue

@@ -0,0 +1,61 @@
+<script setup>
+import { useInfinityScroll } from '@/includes/composables/useInfinityScroll'
+import MessangerModal from '@/Shared/Messanger/MessangerModal.vue'
+import UserAvatar from '@/Shared/Misc/UserAvatar.vue'
+import UserBanner from '@/Shared/Misc/UserBanner.vue'
+import axios from 'axios'
+import debounce from 'lodash/debounce'
+import { ref, watch } from 'vue'
+
+const search = ref('')
+const refMessangerModal = ref()
+const { domNodeFn, cursor, loading, error, callAPI, data: userLists } = useInfinityScroll(async () => {
+    const url = search.value ? `user-friend/?search=${search.value}&cursor=${cursor.value}` : `user-friend/?cursor=${cursor.value}`
+    const res = await axios.get(url)
+    return res.data
+})
+callAPI()
+watch(search, debounce(() => {
+    callAPI()
+}, 500))
+
+
+function openModalMessanger(user) {
+    refMessangerModal.value.openAction(user)
+}
+</script>
+<template>
+  <div v-if="userLists" class="mt-5 grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 2xl:grid-cols-4 cards-block rounded-md bg-indigo-200 grid gap-2 lg:gap-4 grid-cards ">
+    <messanger-modal ref="refMessangerModal" />
+    <div
+      v-for="user in userLists"
+      :ref="el => domNodeFn(el, user.id)"
+      :key="user.id"
+      class="user-card relative cursor-pointer"
+      @click="openModalMessanger(user)"
+    >
+      <div class="absolute inset-x-0 bottom-4 z-10 flex justify-center">
+        <div class="flex flex-col items-center">
+          <div class="flex-shrink-0">
+            <user-avatar :user="user" size="small"
+                         class="border border-white shadow-classic h-20 w-20  text-lg"
+            />
+          </div>
+          <div class="mt-2 text-white text-sm text-center">
+            <p class="">
+              {{ user.name }}
+            </p>
+            <p class="text-xs">
+              {{ user.username }}
+            </p>
+          </div>
+        </div>
+      </div>
+      <div class="gradient-profile relative overflow-hidden">
+        <user-banner class="h-72 bg-indigo-300" :user="user"
+                     size="banner"
+        />
+      </div>
+    </div>
+  </div>
+</template>