fix project-info component

components/ProjectsInfo.vue

@@ -1,48 +1,41 @@
 <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>
 
 <script lang="ts" setup>
 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>

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">

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