Merge pull request #26 from art-by-city/23-profile-page

WIP: Laying out general template structure

components/Avatar.vue

@@ -0,0 +1,13 @@
+<template>
+  <v-avatar color="black" size="200" />
+</template>
+
+<style>
+
+
+</style>
+
+<script setup lang="ts">
+defineProps<{ address: string }>()
+
+</script>

components/BioCard.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-card elevation="0">
+    <v-card-title>{{ address }}</v-card-title>
+    <v-card-subtitle class="pb-0">
+      <p class="mb-0">
+        Second Name
+      </p>
+      <p class="mb-0">
+        Third Name
+      </p>
+      <p class="mb-0">
+        Socials
+      </p>
+    </v-card-subtitle>
+    <v-card-text class="pb-0">
+      Artist bio goes here please.
+    </v-card-text>
+  </v-card>
+</template>
+
+<style>
+
+
+</style>
+
+<script setup lang="ts">
+defineProps<{ address: string }>()
+
+</script>

components/LikesFeed.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>Dis be da likes feed for: {{ address }}</div>
+</template>
+
+
+<style>
+
+
+</style>
+
+
+<script setup lang="ts">
+defineProps<{ address: string }>()
+
+</script>

components/PortfolioFeed.vue

@@ -0,0 +1,15 @@
+<template>
+  <div>Dis be da art portfolio feed for: {{ address }}</div>
+</template>
+
+
+<style>
+
+
+</style>
+
+
+<script setup lang="ts">
+defineProps<{ address: string }>()
+
+</script>

components/ProfileEditButton.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-btn justify="center">
+    Edit
+  </v-btn>
+</template>
+
+
+<style>
+
+
+</style>
+
+
+<script setup lang="ts">
+
+
+</script>

components/TipButton.vue

@@ -0,0 +1,15 @@
+<template>
+  <v-btn justify="center">
+    Tip
+  </v-btn>
+</template>
+
+<style>
+
+
+</style>
+
+<script setup lang="ts">
+defineProps<{ address: string }>()
+
+</script>

components/TipsFeed.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>Dis be da likes feed for: {{ address }}</div>
+</template>
+
+<style>
+
+
+</style>
+
+<script setup lang="ts">
+defineProps<{ address: string }>()
+
+</script>

pages/[profile]/index.vue

@@ -0,0 +1,75 @@
+<template>
+  <v-container v-if="data && data.address">
+    <v-row>
+      <v-col lg="2" offset-lg="1">
+        <v-row class="mt-4" justify="center">
+          <Avatar :address="data.address" />
+        </v-row>
+        <v-row class="mt-4 mb-1 mx-auto" justify="center">
+          <template v-if="data.isProfileOfCurrentUser">
+            <ProfileEditButton />
+          </template>
+          <template v-else>
+            <TipButton :address="data.address" />
+          </template>
+        </v-row>
+      </v-col>
+      <v-col lg="4" offset-lg="1">
+        <BioCard :address="data.address" />
+      </v-col>
+    </v-row>
+    <v-row dense>
+      <v-col lg="6">
+        <v-tabs v-model="tab" color="black">
+          <v-tab value="art">
+            Art
+          </v-tab>
+          <v-tab value="liked">
+            Likes
+          </v-tab>
+          <v-tab value="tips">
+            Tips
+          </v-tab>
+        </v-tabs>
+        <v-divider />
+      </v-col>
+    </v-row>
+    <v-row>
+      <v-col>
+        <template v-if="tab === 'liked'">
+          Likes
+          <LikesFeed :address="data.address" />
+        </template>
+        <template v-else-if="tab === 'tips'">
+          Tips
+          <TipsFeed :address="data.address" />
+        </template>
+        <template v-else>
+          Art
+          <PortfolioFeed :address="data.address" />
+        </template>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script setup lang="ts">
+import { useAuthStore } from '~/stores/auth'
+
+const auth = useAuthStore()
+
+const abc = useArtByCity()
+const route = useRoute()
+
+const tab = ref<null | string>(null)
+const usernameOrAddress = route.params.profile as string
+
+const { data } = useLazyAsyncData(usernameOrAddress, async () => {
+  const resolved = await abc.legacy.usernames.resolve(usernameOrAddress)
+
+  return {
+    ...resolved,
+    isProfileOfCurrentUser: auth.address === resolved.address
+  }
+})
+</script>

pages/discover.vue

@@ -6,7 +6,7 @@
       </v-col>
       <v-spacer />
       <v-col align-self="end" cols="2">
-        <v-btn class="ma-2" @click="refresh" variant="text" align-center>
+        <v-btn class="ma-2" variant="text" align-center @click="refresh">
           refresh
         </v-btn>
       </v-col>