Feature/App image (#46)

* added app-image with loader * optimized app-image --------- Co-authored-by: Yehor Podporinov <[email protected]>
dl-solarity · Oct 23, 2023 · 6992f76 · 6992f76
1 parent a958f04
commit 6992f76
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 2 deletions.
diff --git a/components/AppImage.vue b/components/AppImage.vue
@@ -0,0 +1,54 @@
+<template>
+  <div class="app-image">
+    <div v-if="isLoading" class="app-image__loader-wrp">
+      <template v-if="$slots.loading">
+        <slot name="loading" /><!--THERE IS A SLOT HERE-->
+      </template>
+      <template v-else>
+        <app-loader />
+      </template>
+    </div>
+    <template v-else-if="error && $slots.error">
+      <slot name="error" :error="error" /><!--THERE IS A SLOT HERE-->
+    </template>
+    <template v-else>
+      <img v-bind="$attrs" class="app-image__img" :alt="alt" :src="src" />
+    </template>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { AppLoader } from '#components'
+import { useImage } from '@vueuse/core'
+
+const props = withDefaults(
+  defineProps<{
+    src?: string
+    alt?: string
+  }>(),
+  {
+    src: '',
+    alt: '',
+  },
+)
+
+const { error, isLoading } = useImage(props)
+</script>
+
+<style lang="scss" scoped>
+.app-image {
+  display: flex;
+  object-fit: cover;
+  overflow: hidden;
+  background: var(--background-primary-main);
+  border-radius: var(--border-radius-main);
+}
+
+.app-image__loader-wrp {
+  margin: auto;
+}
+
+.app-image__img {
+  all: inherit;
+}
+</style>
diff --git a/components/AuditsCard.vue b/components/AuditsCard.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="audits-card">
-    <img :src="audit.imgSrc" class="audits-card__img" alt="audit-image" />
+    <app-image :src="audit.imgSrc" class="audits-card__img" alt="audit-image" />
     <div class="audits-card__content">
       <div class="audits-card__title-wrp">
         <h3 class="audits-card__title">
@@ -24,6 +24,7 @@
 </template>
 
 <script lang="ts" setup>
+import { AppImage } from '#components'
 import { Audit } from '@/types'
 
 defineProps<{
@@ -42,7 +43,6 @@ defineProps<{
 }
 
 .audits-card__img {
-  display: block;
   aspect-ratio: 600 / 318;
   width: 100%;
   object-fit: cover;