Feature/Progress bar (#5)

* added progress-bar * fix import in info-dashboard --------- Co-authored-by: Yehor Podporinov <[email protected]>
MorpheusAIs · Jan 10, 2024 · de269dc · de269dc
1 parent 694b94c
commit de269dc
Show file tree

Hide file tree

Showing 5 changed files with 93 additions and 5 deletions.
diff --git a/src/common/InfoDashboard.vue b/src/common/InfoDashboard.vue
@@ -1,6 +1,11 @@
 <template>
   <div class="info-dashboard">
-    <div class="info-dashboard__progress-bar" />
+    <progress-bar
+      class="info-dashboard__progress-bar"
+      :title="$t('info-dashboard.progress-bar-title')"
+      :progress="56.5"
+      :total="100"
+    />
     <ul v-if="indicators?.length" class="info-dashboard__indicators">
       <li
         v-for="(indicator, idx) in indicators"
@@ -28,8 +33,9 @@
 </template>
 
 <script lang="ts" setup>
-import { Icon } from '@/common'
 import { type InfoDashboardType } from '@/types'
+import Icon from './Icon.vue'
+import ProgressBar from './ProgressBar.vue'
 
 defineProps<{
   indicators?: InfoDashboardType.Indicator[]
@@ -65,9 +71,6 @@ defineProps<{
 .info-dashboard__progress-bar {
   height: toRem(156);
   width: toRem(156);
-  border: toRem(12) solid;
-  border-radius: 50%;
-  background: linear-gradient(158.09deg, #ffffff 14.34%, #fbc969 83.65%);
 
   @include respond-to(medium) {
     height: toRem(126);

diff --git a/src/common/ProgressBar.vue b/src/common/ProgressBar.vue
@@ -0,0 +1,75 @@
+<template>
+  <div class="progress-bar" :style="{ '--progress': `${progressPercent}%` }">
+    <p class="progress-bar__title">
+      {{ title }}
+    </p>
+    <h4>{{ `${progressPercent}%` }}</h4>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue'
+
+const props = defineProps<{
+  title: string
+  progress: number
+  total: number
+}>()
+
+const progressPercent = computed<number>(() =>
+  Number(((props.progress / props.total) * 100).toFixed(2)),
+)
+</script>
+
+<style lang="scss" scoped>
+$z-index: 1;
+
+.progress-bar {
+  position: relative;
+  z-index: $z-index;
+  aspect-ratio: 1/1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+
+  &:before {
+    $z-index: -1;
+
+    content: '';
+    position: absolute;
+    z-index: $z-index;
+    inset: 0;
+    display: block;
+    background: conic-gradient(
+      #ffffff,
+      #fbc969 var(--progress),
+      #313a36 var(--progress)
+    );
+    border-radius: inherit;
+  }
+
+  &:after {
+    $z-index: -1;
+
+    content: '';
+    position: absolute;
+    z-index: $z-index;
+    inset: toRem(12);
+    display: block;
+    background: #0d1510;
+    border-radius: inherit;
+
+    @include respond-to(medium) {
+      background: #12241f;
+    }
+  }
+}
+
+.progress-bar__title {
+  text-align: center;
+
+  @include body-3-regular;
+}
+</style>
diff --git a/src/common/index.ts b/src/common/index.ts
@@ -12,6 +12,7 @@ export { default as AppNavbar } from '@/common/AppNavbar.vue'
 export { default as AppNavbarMobile } from './AppNavbarMobile.vue'
 export { default as AppTabs } from './AppTabs.vue'
 export { default as Modal } from '@/common/Modal.vue'
+export { default as ProgressBar } from './ProgressBar.vue'
 
 export * from './modals'
 export * from './loaders'

diff --git a/src/localization/resources/en.json b/src/localization/resources/en.json
@@ -62,6 +62,9 @@
       "claim-btn": "Claim MOR"
     }
   },
+  "info-dashboard": {
+    "progress-bar-title": "Your share"
+  },
   "info-bar": {
     "status--public": "Open",
     "status--private": "Private"

diff --git a/src/styles/_mixins.scss b/src/styles/_mixins.scss
@@ -163,6 +163,12 @@ $media-breakpoints: (
   font-weight: 600;
   line-height: toRem(34);
   letter-spacing: 0;
+
+  @include respond-to(medium) {
+    font-size: toRem(20);
+    line-height: toRem(30);
+
+  }
 }
 
 @mixin body-1-semi-bold {