first commit

resources/js/views/pages/user-profile/profile/About.vue

@@ -0,0 +1,109 @@
+<script setup>
+const props = defineProps({
+  data: {
+    type: null,
+    required: true,
+  },
+})
+</script>
+
+<template>
+  <VCard class="mb-4">
+    <VCardText>
+      <div class="text-body-2 mb-4 text-disabled">
+        ABOUT
+      </div>
+      <div class="d-flex flex-column gap-y-4">
+        <div
+          v-for="item in props.data.about"
+          :key="item.property"
+          class="d-flex align-center gap-x-2"
+        >
+          <VIcon
+            :icon="item.icon"
+            size="24"
+          />
+          <div class="font-weight-medium">
+            {{ item.property }}:
+          </div>
+          <div>
+            {{ item.value }}
+          </div>
+        </div>
+      </div>
+
+      <div class="text-body-2 text-disabled mt-6 mb-4">
+        CONTACTS
+      </div>
+      <div class="d-flex flex-column gap-y-4">
+        <div
+          v-for="item in props.data.contacts"
+          :key="item.property"
+          class="d-flex align-center gap-x-2"
+        >
+          <VIcon
+            :icon="item.icon"
+            size="24"
+          />
+          <div class="font-weight-medium">
+            {{ item.property }}:
+          </div>
+          <div class="text-truncate">
+            {{ item.value }}
+          </div>
+        </div>
+      </div>
+
+      <div class="text-body-2 text-disabled mt-6 mb-4">
+        TEAMS
+      </div>
+
+      <div class="d-flex flex-column gap-y-4">
+        <div
+          v-for="item in props.data.teams"
+          :key="item.property"
+        >
+          <div class="d-flex align-center gap-x-2">
+            <div class="font-weight-medium text-no-wrap">
+              {{ item.property }}:
+            </div>
+            <div class="text-no-wrap text-truncate">
+              {{ item.value }}
+            </div>
+          </div>
+        </div>
+      </div>
+    </VCardText>
+  </VCard>
+
+  <VCard>
+    <VCardText>
+      <div class="text-body-2 text-disabled mb-4">
+        OVERVIEW
+      </div>
+
+      <div class="d-flex flex-column gap-y-4">
+        <div
+          v-for="item in props.data.overview"
+          :key="item.property"
+          class="d-flex gap-x-2 align-center"
+        >
+          <VIcon
+            :icon="item.icon"
+            size="24"
+          />
+          <div class="font-weight-medium">
+            {{ item.property }}:
+          </div>
+          <div>{{ item.value }}</div>
+        </div>
+      </div>
+    </VCardText>
+  </VCard>
+</template>
+
+<style lang="scss" scoped>
+.card-list {
+  --v-card-list-gap: 16px;
+}
+</style>