explorer-app/components/Project/ProjectOpeness.vue

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

defineProps<{
  project: Project
}>()
</script>

<template>
  <ProjectDetailCategoryDivider title="OPENESS" badge-text="3/10">
    <UnoIcon i-web-code_v2 text-24px />
  </ProjectDetailCategoryDivider>
  <ProjectDetailContainer>
    <div mt-32px text="14px sm:16px" leading-24px font-400>
      <h3 text-app-text-grey>
        {{ 'Project Description' }}
      </h3>
      <span text="14px sm:16px" leading-20px>{{ project.description ?? '---' }}</span>
    </div>
    <div mt-24px>
      <h3 text="14px sm:16px app-text-grey" leading-20px>
        {{ 'Infrastructure links' }}
      </h3>
      <div grid grid-cols-2 gap-16px mt-8px lg:grid-cols-4>
        <ProjectOpenessLink v-if="project.links?.web" :to="project.links?.web">
          <template #prefix>
            <UnoIcon i-web-website />
          </template>
          {{ 'Website' }}
        </ProjectOpenessLink>
        <ProjectOpenessLink v-if="project.links?.blog" :to="project.links.blog">
          <template #prefix>
            <UnoIcon i-web-website />
          </template>
          {{ 'Blog' }}
        </ProjectOpenessLink>
        <ProjectOpenessLink v-if="project.links?.github" :to="project.links?.github">
          <template #prefix>
            <UnoIcon i-web-github opacity-30 text-27px />
          </template>
          {{ 'Github' }}
        </ProjectOpenessLink>
        <ProjectOpenessLink v-if="project.links?.docs" :to="project.links?.docs">
          <template #prefix>
            <UnoIcon i-web-documents text-24px />
          </template>
          {{ 'Docs' }}
        </ProjectOpenessLink>
        <ProjectOpenessLink v-if="project.links?.block_explorer" :to="project.links.block_explorer">
          <template #prefix>
            <UnoIcon i-web-explorer opacity-30 />
          </template>
          {{ 'Explorer' }}
        </ProjectOpenessLink>
        <ProjectOpenessLink v-if="project.links?.snapshot" :to="project.links.snapshot">
          <template #prefix>
            <UnoIcon i-web-snapshot text-32px />
          </template>
          {{ 'Snapshot' }}
        </ProjectOpenessLink>
        <ProjectOpenessLink v-if="project.links?.token" :to="project.links.token">
          <template #prefix>
            <UnoIcon i-web-token text-28px />
          </template>
          {{ 'Token' }}
        </ProjectOpenessLink>
        <ProjectOpenessLink v-if="project.links?.coingecko" :to="project.links.coingecko">
          <template #prefix>
            <UnoIcon i-web-coingecko opacity-30 text-24px />
          </template>
          {{ 'Coingecko' }}
        </ProjectOpenessLink>
      </div>
    </div>
    <div mt-24px>
      <h3 text="14px sm:16px app-text-grey" leading-20px>
        {{ 'Socials' }}
      </h3>
      <div grid grid-cols-2 gap-16px mt-8px lg:grid-cols-4>
        <ProjectOpenessLink v-if="project.links?.forum" :to="project.links.forum">
          <template #prefix>
            <UnoIcon i-web-forum opacity-30 text-28px />
          </template>
          {{ 'Forum' }}
        </ProjectOpenessLink>
        <ProjectOpenessLink v-if="project.links?.discord" :to="project.links.discord">
          <template #prefix>
            <UnoIcon i-web-discord text-27px />
          </template>
          {{ 'Discord' }}
        </ProjectOpenessLink>
        <ProjectOpenessLink v-if="project.links?.twitter" :to="project.links.twitter">
          <template #prefix>
            <UnoIcon i-web-twitter_x opacity-30 text-22px />
          </template>
          {{ 'Twitter' }}
        </ProjectOpenessLink>
        <ProjectOpenessLink v-if="project.links?.lens" :to="project.links.lens">
          <template #prefix>
            <UnoIcon i-web-lens text-32px />
          </template>
          {{ 'Lens' }}
        </ProjectOpenessLink>
        <ProjectOpenessLink v-if="project.links?.farcaster" :to="project.links.farcaster">
          <template #prefix>
            <UnoIcon i-web-farcaster text-26px />
          </template>
          {{ 'Farcaster' }}
        </ProjectOpenessLink>
        <ProjectOpenessLink v-if="project.links?.telegram" :to="project.links.telegram">
          <template #prefix>
            <UnoIcon i-web-telegram opacity-30 text-22px />
          </template>
          {{ 'Telegram' }}
        </ProjectOpenessLink>
      </div>
    </div>
    <div mt-24px>
      <ProjectOpenessTeamMembers :members="project.team" />
    </div>
    <div grid grid-cols-2 items-start mt-32px gap-y-26px lg:grid-cols-4>
      <ProjectInfoItem :check-undefined="project.product_launch_day" title="Product launch day">
        {{ project.product_launch_day }}
      </ProjectInfoItem>
      <ProjectInfoItem
        title="Opensource" bold
        :check-undefined="project.blockchain_features?.opensource"
        :color=" project.blockchain_features?.opensource ? '#A8FF18' : '#FF0000'"
      >
        {{ project.blockchain_features?.opensource ? 'Yes' : 'No' }}
      </ProjectInfoItem>
    </div>
    <div mt-32px w-full>
      <ProjectInfoItem
        :check-undefined="project.funding"
        title="Funding" bold
        w-full
      >
        <template v-for="fund in project.funding" :key="fund.name">
          <div mt-16px grid grid-cols-2 sm:grid-cols-4>
            <span v-if="fund.name">{{ fund.name }}</span>
            <span v-if="fund.time" font-400>{{ fund.time }}</span>
            <span v-if="fund.time" font-400 text-app-text-grey>{{ fund.type }}</span>
            <span v-if="fund.time" font-400>{{ fund.value }}</span>
          </div>
        </template>
      </ProjectInfoItem>
    </div>
  </ProjectDetailContainer>
</template>