explorer-app/components/Project/ProjectHeading.vue

<script lang="ts" setup>
import type { Project } from '~/types'

const props = defineProps<{
  project: Project
}>()

const availableSupport = computed(() => {
  const filteredKeys = ['forum', 'discord', 'twitter', 'lens', 'farcaster', 'telegram']
  if (typeof props.project.links === 'object' && (props.project.links !== null || props.project.links !== undefined))
    return Object.keys(props.project.links).filter(key => filteredKeys.includes(key)).length

  return 0
})

const logo = props.project?.logos?.at(0)?.url
</script>

<template>
  <div lg:flex lg:gap-32px>
    <NuxtImg lg:max-w-320px lg:max-h-320px shrink :src="logo ?? '/no-image-1-1.svg'" class="bg-app-bg-grey object-cover max-w-full h-full vertical-align[middle] block border-0 w-full h-[300px]" />
    <div grow>
      <div flex flex-col justify-between gap-32px lg:flex-row lg:items-center>
        <div mt-24px>
          <NuxtLink :to="project.links?.web" target="_blank" flex items-center gap-12px hover:underline underline-offset-3>
            <h1 text="24px sm:32px app-white" leading-32px font-700>
              {{ project.name }}
            </h1>
            <UnoIcon i-web-openinnew text-16px />
          </NuxtLink>
          <h2 text="16px app-text-grey" leading-24px mt-8px>
            {{ project.project_type ?? '---' }}
          </h2>
        </div>
        <div
          border-2px
          class="border-app-black bg-app-white text-app-black"
          flex items-center justify-center px-32px py-16px text-32px font-700 leading-40px cursor-pointer
        >
          {{ '63%' }}
        </div>
      </div>
      <div grid grid-cols-2 gap-16px my-32px lg:grid-cols-4>
        <ProjectInfoItem :check-undefined="project.links?.github" title="Github" bold text-size="18px">
          <template #prefix>
            <UnoIcon i-web-code />
          </template>
          {{ project.links?.github ? 'YES' : 'NO' }}
        </ProjectInfoItem>
        <ProjectInfoItem :check-undefined="project.project_status?.version" title="Product readyness" bold text-size="18px">
          <template #prefix>
            <UnoIcon i-web-cube />
          </template>
          {{ project.project_status?.version }}
        </ProjectInfoItem>
        <ProjectInfoItem :check-undefined="project.team?.length" title="Team" bold text-size="18px">
          <template #prefix>
            <UnoIcon i-web-team />
          </template>
          {{ `${project.team?.length} members` }}
        </ProjectInfoItem>
        <ProjectInfoItem :check-undefined="project.links?.docs" title="Docs" bold text-size="18px">
          <template #prefix>
            <UnoIcon i-web-docs text-28px />
          </template>
          {{ project.links?.docs ? 'YES' : 'NO' }}
        </ProjectInfoItem>
        <ProjectInfoItem :check-undefined="project.audits" title="Audit" bold text-size="18px">
          <template #prefix>
            <UnoIcon i-web-audit text-28px />
          </template>
          {{ project.audits ? 'YES' : 'NO' }}
        </ProjectInfoItem>
        <ProjectInfoItem :check-undefined="project.links" title="Available support" bold text-size="18px">
          <template #prefix>
            <UnoIcon i-web-support text-28px />
          </template>
          {{ `${availableSupport} channels` }}
        </ProjectInfoItem>
      </div>
      <div grid grid-cols-2 gap-16px my-32px lg:grid-cols-4>
        <ProjectInfoItem :check-undefined="project.blockchain_features?.network" tooltip-link="/" title="Ecosystem" bold>
          {{ project.blockchain_features?.network }}
        </ProjectInfoItem>
        <ProjectInfoItem invisible title="Last update" bold>
          17/11/2023 – 23:22
        </ProjectInfoItem>
      </div>
    </div>
  </div>
</template>