From ebc5ffc601cd9f7ccec06e2f583201d33e129f7b Mon Sep 17 00:00:00 2001
From: Yehor Podporinov <yehor.podporinov@Yehors-MacBook-Pro.local>
Date: Mon, 25 Sep 2023 17:39:55 +0300
Subject: [PATCH] fix project-info component

---
 components/ProjectsInfo.vue     | 21 +++++++--------------
 components/ProjectsInfoCard.vue | 27 +++++++++------------------
 types/common.types.ts           |  8 ++++++++
 3 files changed, 24 insertions(+), 32 deletions(-)

diff --git a/components/ProjectsInfo.vue b/components/ProjectsInfo.vue
index bee4579..86b91ea 100644
--- a/components/ProjectsInfo.vue
+++ b/components/ProjectsInfo.vue
@@ -1,14 +1,6 @@
 <template>
   <div class="projects-info layout-wrapper">
-    <projects-info-card
-      v-for="(card, idx) in cards"
-      :key="idx"
-      :title="card.title"
-      :message="card.message"
-      :btn-text="card.btnText"
-      :href="card.href"
-      :route="card.route"
-    />
+    <projects-info-card v-for="(card, idx) in cards" :key="idx" :card="card" />
   </div>
 </template>
 
@@ -16,33 +8,34 @@
 import ProjectsInfoCard from './ProjectsInfoCard.vue'
 import { config } from '@/config'
 import { ROUTE_PATH } from '@/constants'
+import { ProjectInfoCard } from '@/types'
 import { i18n } from '~/plugins/localization'
 
 const { t } = i18n.global
-const cards = [
+const cards: ProjectInfoCard[] = [
   {
     title: t('projects-info.documentation-title'),
     message: t('projects-info.documentation-message'),
-    href: config.DOCUMENTATION_URL,
     btnText: t('projects-info.visit-btn'),
+    href: config.DOCUMENTATION_URL,
   },
   {
     title: t('projects-info.audits-title'),
     message: t('projects-info.audits-message'),
-    route: ROUTE_PATH.audits,
     btnText: t('projects-info.visit-btn'),
+    route: ROUTE_PATH.audits,
   },
   {
     title: t('projects-info.github-title'),
     message: t('projects-info.github-message'),
-    href: config.GITHUB_URL,
     btnText: t('projects-info.visit-btn'),
+    href: config.GITHUB_URL,
   },
   {
     title: t('projects-info.solidity-tools-title'),
     message: t('projects-info.solidity-tools-message'),
-    route: ROUTE_PATH.abiEncoder,
     btnText: t('projects-info.visit-btn'),
+    route: ROUTE_PATH.abiEncoder,
   },
 ]
 </script>
diff --git a/components/ProjectsInfoCard.vue b/components/ProjectsInfoCard.vue
index 8b8132a..1aca42f 100644
--- a/components/ProjectsInfoCard.vue
+++ b/components/ProjectsInfoCard.vue
@@ -1,37 +1,28 @@
 <template>
   <div class="projects-info-card">
-    <h3>{{ props.title }}</h3>
+    <h3>{{ card.title }}</h3>
     <p class="projects-info-card__message">
-      {{ props.message }}
+      {{ card.message }}
     </p>
     <app-button
       color="none"
       scheme="flat"
       modification="border-circle"
-      :text="btnText"
+      :text="card.btnText"
       :icon-right="$icons.arrowRightUp"
-      :route="props.route"
-      :href="props.href"
+      :route="card.route"
+      :href="card.href"
     />
   </div>
 </template>
 
 <script lang="ts" setup>
 import { AppButton } from '#components'
+import { ProjectInfoCard } from '@/types'
 
-const props = withDefaults(
-  defineProps<{
-    title: string
-    message: string
-    btnText: string
-    href?: string
-    route?: string
-  }>(),
-  {
-    href: '',
-    route: '',
-  },
-)
+defineProps<{
+  card: ProjectInfoCard
+}>()
 </script>
 
 <style scoped lang="scss">
diff --git a/types/common.types.ts b/types/common.types.ts
index 319b508..8375a3f 100644
--- a/types/common.types.ts
+++ b/types/common.types.ts
@@ -31,6 +31,14 @@ export type FieldOption = {
 
 export type HashFunction = (str: string, type: 'text' | 'hex') => string
 
+export type ProjectInfoCard = {
+  title: string
+  message: string
+  btnText: string
+  href?: string
+  route?: string
+}
+
 export type Tab = {
   title: string
   id: string