first commit

resources/js/views/pages/user-profile/connections/index.vue

@@ -0,0 +1,135 @@
+<script setup>
+const router = useRoute('pages-user-profile-tab')
+const connectionData = ref([])
+
+const fetchProjectData = async () => {
+  if (router.params.tab === 'connections') {
+    const data = await $api('/pages/profile', { query: { tab: router.params.tab } }).catch(err => console.log(err))
+
+    connectionData.value = data
+  }
+}
+
+watch(router, fetchProjectData, { immediate: true })
+
+const moreBtnList = [
+  {
+    title: 'Share connection',
+    value: 'Share connection',
+  },
+  {
+    title: 'Block connection',
+    value: 'Block connection',
+  },
+  {
+    type: 'divider',
+    class: 'my-2',
+  },
+  {
+    title: 'Delete',
+    value: 'Delete',
+    class: 'text-error',
+  },
+]
+</script>
+
+<template>
+  <VRow>
+    <VCol
+      v-for="data in connectionData"
+      :key="data.name"
+      sm="6"
+      lg="4"
+      cols="12"
+    >
+      <VCard>
+        <div class="vertical-more">
+          <MoreBtn
+            item-props
+            :menu-list="moreBtnList"
+          />
+        </div>
+
+        <VCardText>
+          <div class="d-flex flex-column align-center justify-center">
+            <VAvatar
+              size="100"
+              :image="data.avatar"
+              class="mb-6"
+            />
+
+            <h5 class="text-h5">
+              {{ data.name }}
+            </h5>
+            <div class="text-body-1">
+              {{ data.designation }}
+            </div>
+
+            <div class="d-flex align-center flex-wrap gap-4 my-6">
+              <VChip
+                v-for="chip in data.chips"
+                :key="chip.title"
+                :color="chip.color"
+                size="small"
+              >
+                {{ chip.title }}
+              </VChip>
+            </div>
+          </div>
+
+          <div class="d-flex justify-space-around">
+            <div class="text-center">
+              <h5 class="text-h5">
+                {{ data.projects }}
+              </h5>
+              <div class="text-body-1">
+                Projects
+              </div>
+            </div>
+            <div class="text-center">
+              <h5 class="text-h5">
+                {{ data.tasks }}
+              </h5>
+              <div class="text-body-1">
+                Tasks
+              </div>
+            </div>
+            <div class="text-center">
+              <h5 class="text-h5">
+                {{ data.connections }}
+              </h5>
+              <div class="text-body-1">
+                Connections
+              </div>
+            </div>
+          </div>
+
+          <div class="d-flex justify-center gap-4 mt-6">
+            <VBtn
+              :prepend-icon="data.isConnected ? 'ri-user-follow-line' : 'ri-user-add-line'"
+              :variant="data.isConnected ? 'elevated' : 'outlined'"
+            >
+              {{ data.isConnected ? 'connected' : 'connect' }}
+            </VBtn>
+
+            <IconBtn
+              color="secondary"
+              variant="outlined"
+              rounded
+            >
+              <VIcon icon="ri-mail-open-line" />
+            </IconBtn>
+          </div>
+        </VCardText>
+      </VCard>
+    </VCol>
+  </VRow>
+</template>
+
+<style lang="scss">
+.vertical-more {
+  position: absolute;
+  inset-block-start: 1rem;
+  inset-inline-end: 0.5rem;
+}
+</style>