From 89e33b0376faa19498100bfaa734c4da4c3db326 Mon Sep 17 00:00:00 2001
From: EvgenyWas <evgeniywas@gmail.com>
Date: Fri, 7 Jun 2024 17:46:19 +0100
Subject: [PATCH] feat: update article page

---
 pages/articles/[topic]/[slug].vue | 68 +++++++++++++++++++++++++++----
 1 file changed, 60 insertions(+), 8 deletions(-)

diff --git a/pages/articles/[topic]/[slug].vue b/pages/articles/[topic]/[slug].vue
index e0cd454..dd97e1b 100644
--- a/pages/articles/[topic]/[slug].vue
+++ b/pages/articles/[topic]/[slug].vue
@@ -1,14 +1,33 @@
 <template>
   <div class="container mb-8">
     <article class="article">
-      <div class="d-flex flex-column justify-center align-center mb-8 mb-md-12">
-        <h1 class="mb-2 text-h5 text-md-h4 text-center">{{ article?.title }}</h1>
+      <div class="article-header d-flex flex-column justify-center align-center mb-8 mb-md-12">
+        <h1 class="mb-2 text-h5 text-md-h4 text-center">
+          {{ article?.title }}
+          <VTooltip text="Views of the article">
+            <template #activator="{ props }">
+              <span
+                v-if="stats || !statsPending"
+                v-bind="props"
+                class="article-header-title-badge d-inline-flex align-center px-1 text-caption bg-grey rounded-xl"
+              >
+                {{ stats?.views }}&nbsp;
+                <VIcon
+                  icon="fas fa-eye"
+                  size="12"
+                />
+              </span>
+            </template>
+          </VTooltip>
+        </h1>
+
         <p
           v-if="article?.author"
           class="text-subtitle-1 mb-2"
         >
           {{ article.author }}
         </p>
+
         <NuxtLink
           v-if="article?.src"
           :to="article.src"
@@ -18,11 +37,12 @@
         >
           Source article
         </NuxtLink>
+
         <img
           v-if="article?.image"
           :src="article.image"
           :alt="article?.title"
-          class="article-image w-75"
+          class="article-header-image w-75"
         />
       </div>
 
@@ -36,6 +56,21 @@
       class="px-0"
       tag="section"
     >
+      <VRow v-if="stats || !statsPending">
+        <VCol class="d-flex flex-column align-center justify-center">
+          <div class="text-h5 mb-2">Rating overview</div>
+          <div class="text-h4">
+            {{ stats?.rate }}
+            <span class="text-h6 ml-n3">&nbsp;/ {{ MAX_ARTICLE_RATE }}</span>
+          </div>
+          <VRating
+            :model-value="3.5"
+            color="yellow-darken-3"
+          />
+          <div class="px-3">{{ stats?.ratings }} ratings</div>
+        </VCol>
+      </VRow>
+
       <VRow>
         <VCol cols="6">
           <VBtn
@@ -79,6 +114,7 @@
 </template>
 
 <script setup lang="ts">
+import { MAX_ARTICLE_RATE } from '~/configs/properties';
 import type { ArticleContent } from '~/types/responses';
 
 type ArticlePageTransition = 'slide-left' | 'slide-right' | 'fade';
@@ -108,6 +144,14 @@ if (!article.value || error.value) {
 
 useSeoMeta({ title: article.value?.title, description: article.value?.description });
 
+// TODO: add stats endpoint
+const { data: stats, pending: statsPending } = await useLazyAsyncData<{ views: number; rate: number; ratings: number }>(
+  () => {
+    return new Promise((resolve) => setTimeout(() => resolve({ views: 200, rate: 3.3, ratings: 3360 }), 2000));
+  },
+  { deep: false },
+);
+
 const { data: siblings } = await useLazyAsyncData(
   () =>
     queryContent<ArticleContent>()
@@ -146,11 +190,19 @@ onBeforeRouteLeave((_, from) => {
 }
 
 .article {
-  &-image {
-    max-width: 100%;
-    height: auto;
-    max-height: 500px;
-    object-fit: contain;
+  &-header {
+    &-image {
+      max-width: 100%;
+      height: auto;
+      max-height: 500px;
+      object-fit: contain;
+    }
+
+    &-title {
+      &-badge {
+        transform: translateY(-5px);
+      }
+    }
   }
 
   ol {