feat: create user profile card (#650)

* feat: create user profile card * chore: cleanup * chore: fix redirect * chore: fix lint * chore: fix failing test locally --------- Co-authored-by: Jerry Hogan <[email protected]>
thisdot · Aug 2, 2023 · 323da30 · 323da30
1 parent 57e6fd7
commit 323da30
Show file tree

Hide file tree

Showing 26 changed files with 421 additions and 40 deletions.
diff --git a/nuxt-pinia-tailwind/README.md b/nuxt-pinia-tailwind/README.md
@@ -53,6 +53,7 @@ Open the project root directory in your terminal and navigate to the `nuxt-pinia
 cd nuxt-pinia-tailwind
 yarn
 ```
+
 ## Live Demo
 
 This demo app gets deployed to Netlify on changes to the `main` branch.

diff --git a/nuxt-pinia-tailwind/components/PrivacyBadge/PrivacyBadge.vue b/nuxt-pinia-tailwind/components/PrivacyBadge/PrivacyBadge.vue
@@ -1,6 +1,5 @@
 <template>
   <span
-    :class="customClass"
     class="py-0.5 px-2 text-xs rounded-xl text-gray-600 border border-gray-300 font-medium"
   >
     {{ badgetText }}
@@ -12,11 +11,6 @@ import { defineComponent, ref } from '@nuxtjs/composition-api';
 export default defineComponent({
   name: 'PrivacyBadge',
   props: {
-    customClass: {
-      type: String,
-      required: false,
-      default: '',
-    },
     isPrivate: {
       type: Boolean,
       required: true,

diff --git a/nuxt-pinia-tailwind/components/ProfileNav/ProfileNav.vue b/nuxt-pinia-tailwind/components/ProfileNav/ProfileNav.vue
@@ -0,0 +1,35 @@
+<template>
+  <div>
+    <TabNavigation :tabs="tabList"></TabNavigation>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+
+export default Vue.extend({
+  computed: {
+    tabList() {
+      return [
+        {
+          title: 'Overview',
+          path: `${this.$route.path}`,
+          icon: 'GitOverviewIcon',
+        },
+        {
+          title: 'Repositories',
+          path: `${this.$route.path}?repositories`,
+          icon: 'GitRepoIcon',
+          label: this.$auth.user.public_repos,
+        },
+        {
+          title: 'Stars',
+          path: `${this.$route.path}?stars`,
+          icon: 'StarIcon',
+          label: this.$auth.user.stars_count,
+        },
+      ];
+    },
+  },
+});
+</script>
diff --git a/nuxt-pinia-tailwind/components/RepoMeta/RepoMeta.vue b/nuxt-pinia-tailwind/components/RepoMeta/RepoMeta.vue
@@ -14,11 +14,11 @@
         v-if="stargazerCount"
         class="hover:cursor-pointer hover:text-blue-600"
       >
-        <StarIcon custom-class="w-4 h-4 inline mb-0.5" /> {{ stargazerCount }}
+        <StarIcon class="w-4 h-4 inline mb-0.5" /> {{ stargazerCount }}
       </span>
 
       <span v-if="forkCount" class="hover:cursor-pointer hover:text-blue-600">
-        <GitBranchIcon custom-class="w-4 h-4 inline mb-0.5" /> {{ forkCount }}
+        <GitBranchIcon class="w-4 h-4 inline mb-0.5" /> {{ forkCount }}
       </span>
     </div>
 

diff --git a/nuxt-pinia-tailwind/components/RepositoryCard/RepositoryCard.vue b/nuxt-pinia-tailwind/components/RepositoryCard/RepositoryCard.vue
@@ -6,7 +6,7 @@
           {{ name }}
         </p>
       </nuxt-link>
-      <PrivacyBadge :is-private="false" :custom-class="'relative bottom-0.5'" />
+      <PrivacyBadge :is-private="false" :class="'relative bottom-0.5'" />
     </h3>
 
     <div>

diff --git a/nuxt-pinia-tailwind/components/TabNavigation/TabNavigation.vue b/nuxt-pinia-tailwind/components/TabNavigation/TabNavigation.vue
@@ -0,0 +1,53 @@
+<template>
+  <div class="tab-navigation border-gray-200">
+    <nav class="-mb-px flex" aria-label="Tabs">
+      <nuxt-link
+        v-for="(tab, i) in tabs"
+        :key="i"
+        :to="tab.path"
+        class="group relative py-2 mx-2 border-b-2 border-transparent"
+      >
+        <div
+          class="inline-flex items-center py-1 px-2 font-medium text-sm rounded-lg group-hover:bg-gray-100"
+        >
+          <component :is="tab.icon" class="-ml-0.5 mr-2 h-4 w-4"></component>
+          <span>{{ tab.title }}</span>
+          <span
+            v-if="tab.label"
+            class="ml-2 bg-gray-200 font-medium text-xs text-gray-800 py-0.5 px-2 rounded-xl"
+          >
+            {{ tab.label }}
+          </span>
+        </div>
+      </nuxt-link>
+    </nav>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue, { PropType } from 'vue';
+import { ITabItem } from './types';
+export default Vue.extend({
+  props: {
+    tabs: {
+      type: Array as PropType<Array<ITabItem>>,
+      default: () => [],
+    },
+  },
+});
+</script>
+
+<style>
+.tab-navigation .nuxt-link-exact-active::after {
+  @apply bg-orange-500;
+
+  position: absolute;
+  content: '';
+  right: 50%;
+  bottom: calc(50% - 24px);
+  width: 100%;
+  height: 2px;
+  border-radius: 6px;
+  transform: translate(50%, -50%);
+}
+</style>
diff --git a/nuxt-pinia-tailwind/components/TabNavigation/types.ts b/nuxt-pinia-tailwind/components/TabNavigation/types.ts
@@ -0,0 +1,6 @@
+export interface ITabItem {
+  title: string;
+  path?: string;
+  icon: string;
+  label?: number | string;
+}
diff --git a/nuxt-pinia-tailwind/components/UserProfile/UserProfile.vue b/nuxt-pinia-tailwind/components/UserProfile/UserProfile.vue
@@ -0,0 +1,92 @@
+<template>
+  <div>
+    <div class="w-[260px] h-[260px]">
+      <img
+        :src="userProfile.avatar"
+        alt="Avatar"
+        width="260"
+        height="260"
+        class="absolute rounded-full shadow z-30"
+      />
+    </div>
+    <h1 class="mt-2">
+      <div class="text-2xl text-gray-800 font-bold leading-tight">
+        {{ userProfile.name }}
+      </div>
+      <div class="text-xl text-gray-500 font-light">
+        {{ userProfile.username }}
+      </div>
+    </h1>
+    <div class="text-gray-800 mt-4">{{ userProfile.bio }}</div>
+    <div class="text-sm text-gray-600 my-4">
+      <UsersIcon class="w-4 h-4 mb-0.5 mr-1 inline" />
+      <span class="inline-block">
+        <span class="font-medium text-gray-900">{{
+          userProfile.followers
+        }}</span>
+        followers
+      </span>
+      <span class="mx-1">·</span>
+      <span class="inline-block">
+        <span class="font-medium text-gray-900">{{
+          userProfile.following
+        }}</span>
+        following
+      </span>
+    </div>
+    <div class="text-sm text-gray-800 space-y-1">
+      <div v-if="userProfile.company">
+        <OfficeBuildingIcon class="w-4 h-4 mb-0.5 mr-1 inline" />
+        {{ userProfile.company }}
+      </div>
+      <div v-if="userProfile.location">
+        <LocationMarkerIcon class="w-4 h-4 mb-0.5 mr-1 inline" />
+        {{ userProfile.location }}
+      </div>
+      <div v-if="userProfile.websiteUrl">
+        <LinkIcon class="w-4 h-4 mb-0.5 mr-1 inline" />
+        <a
+          class="hover:text-blue-600 hover:underline"
+          :href="userProfile.websiteUrl"
+          target="_blank"
+          rel="noreferrer"
+        >
+          {{ userProfile.websiteUrl }}
+        </a>
+      </div>
+      <div v-if="userProfile.twitterUsername">
+        <TwitterLogo class="w-4 h-4 mb-0.5 mr-1 inline" />
+        <a
+          class="hover:text-blue-600 hover:underline"
+          :href="`https:/twitter.com/${userProfile.twitterUsername}`"
+          target="_blank"
+          rel="noreferrer"
+        >
+          @{{ userProfile.twitterUsername }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+  computed: {
+    userProfile() {
+      return {
+        avatar: this.$auth.user.avatar_url,
+        name: this.$auth.user.name,
+        username: this.$auth.user.login,
+        bio: this.$auth.user.bio,
+        followers: this.$auth.user.followers,
+        following: this.$auth.user.following,
+        company: this.$auth.user.company,
+        location: this.$auth.user.location,
+        websiteUrl: this.$auth.user.website_url,
+        twitterUsername: this.$auth.user.twitter_username,
+      };
+    },
+  },
+});
+</script>
diff --git a/...onents/icons/GithubLogo/GitBranchIcon.vue → ...ilwind/components/icons/GitBranchIcon.vue b/...onents/icons/GithubLogo/GitBranchIcon.vue → ...ilwind/components/icons/GitBranchIcon.vue
@@ -12,7 +12,7 @@
   </svg>
 </template>
 
-<script lang="ts">
+<script>
 export default {
   name: 'GitBranchIcon',
   props: {

diff --git a/nuxt-pinia-tailwind/components/icons/GitOverviewIcon.vue b/nuxt-pinia-tailwind/components/icons/GitOverviewIcon.vue
@@ -0,0 +1,8 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" version="1.1">
+    <path
+      fill-rule="evenodd"
+      d="M0 1.75A.75.75 0 01.75 1h4.253c1.227 0 2.317.59 3 1.501A3.744 3.744 0 0111.006 1h4.245a.75.75 0 01.75.75v10.5a.75.75 0 01-.75.75h-4.507a2.25 2.25 0 00-1.591.659l-.622.621a.75.75 0 01-1.06 0l-.622-.621A2.25 2.25 0 005.258 13H.75a.75.75 0 01-.75-.75V1.75zm8.755 3a2.25 2.25 0 012.25-2.25H14.5v9h-3.757c-.71 0-1.4.201-1.992.572l.004-7.322zm-1.504 7.324l.004-5.073-.002-2.253A2.25 2.25 0 005.003 2.5H1.5v9h3.757a3.75 3.75 0 011.994.574z"
+    ></path>
+  </svg>
+</template>
diff --git a/nuxt-pinia-tailwind/components/icons/GitRepoIcon.vue b/nuxt-pinia-tailwind/components/icons/GitRepoIcon.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M13 21v2.5l-3-2-3 2V21h-.5A3.5 3.5 0 0 1 3 17.5V5a3 3 0 0 1 3-3h14a1 1 0 0 1 1 1v17a1 1 0 0 1-1 1h-7zm0-2h6v-3H6.5a1.5 1.5 0 0 0 0 3H7v-2h6v2zm6-5V4H6v10.035A3.53 3.53 0 0 1 6.5 14H19zM7 5h2v2H7V5zm0 3h2v2H7V8zm0 3h2v2H7v-2z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'GitRepo',
+};
+</script>
diff --git a/...omponents/icons/GithubLogo/GithubLogo.vue → ...-tailwind/components/icons/GithubLogo.vue b/...omponents/icons/GithubLogo/GithubLogo.vue → ...-tailwind/components/icons/GithubLogo.vue
@@ -4,7 +4,7 @@
     viewBox="0 0 120.78 117.79"
     :class="customClass"
   >
-    <title>gh-logo-lg-dark-bg</title>
+    <title>Github Logo</title>
     <g id="Layer_2" data-name="Layer 2">
       <g id="Layer_1-2" data-name="Layer 1">
         <path
@@ -44,7 +44,7 @@
   </svg>
 </template>
 
-<script lang="ts">
+<script>
 export default {
   name: 'GithubLogo',
   props: {

diff --git a/nuxt-pinia-tailwind/components/icons/LocationMarkerIcon.vue b/nuxt-pinia-tailwind/components/icons/LocationMarkerIcon.vue
@@ -0,0 +1,27 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
+    ></path>
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
+    ></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'LocationMarkerIcon',
+};
+</script>
diff --git a/nuxt-pinia-tailwind/components/icons/OfficeBuildingIcon.vue b/nuxt-pinia-tailwind/components/icons/OfficeBuildingIcon.vue
@@ -0,0 +1,23 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    aria-hidden="true"
+    class="UserProfile_icon__3z6av"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4"
+    ></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'OfficeBuildingIcon',
+};
+</script>
diff --git a/.../components/icons/GithubLogo/StarIcon.vue → ...ia-tailwind/components/icons/StarIcon.vue b/.../components/icons/GithubLogo/StarIcon.vue → ...ia-tailwind/components/icons/StarIcon.vue
@@ -21,7 +21,7 @@ export default {
     customClass: {
       type: String,
       required: false,
-      default: 'h-6',
+      default: 'h-4',
     },
   },
 };

diff --git a/nuxt-pinia-tailwind/components/icons/TwitterLogo.vue b/nuxt-pinia-tailwind/components/icons/TwitterLogo.vue
@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path fill="none" d="M0 0h24v24H0z" />
+    <path
+      d="M22.162 5.656a8.384 8.384 0 0 1-2.402.658A4.196 4.196 0 0 0 21.6 4c-.82.488-1.719.83-2.656 1.015a4.182 4.182 0 0 0-7.126 3.814 11.874 11.874 0 0 1-8.62-4.37 4.168 4.168 0 0 0-.566 2.103c0 1.45.738 2.731 1.86 3.481a4.168 4.168 0 0 1-1.894-.523v.052a4.185 4.185 0 0 0 3.355 4.101 4.21 4.21 0 0 1-1.89.072A4.185 4.185 0 0 0 7.97 16.65a8.394 8.394 0 0 1-6.191 1.732 11.83 11.83 0 0 0 6.41 1.88c7.693 0 11.9-6.373 11.9-11.9 0-.18-.005-.362-.013-.54a8.496 8.496 0 0 0 2.087-2.165z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'TwitterLogo',
+};
+</script>
diff --git a/nuxt-pinia-tailwind/components/icons/UsersIcon.vue b/nuxt-pinia-tailwind/components/icons/UsersIcon.vue
@@ -0,0 +1,22 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    stroke="currentColor"
+    aria-hidden="true"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
+    ></path>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'UsersIcon',
+};
+</script>