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-bi-code-square
      text-24px
    />
  </ProjectDetailCategoryDivider>
  <ProjectDetailContainer>
    <div
      mt-32px
      text="14px sm:16px"
      leading-24px
      font-400
    >
      <h3
        text-app-text-grey
        mb-8px
      >
        Project Description
      </h3>
      <p
        text="14px sm:16px"
        leading-20px
      >
        {{ project.description ?? '---' }}
      </p>
    </div>
    <div
      grid
      grid-cols="2 lg:4"
      mt="24px lg:32px"
      text="14px lg:16px"
      gap-y-16px
    >
      <div>
        <h3
          text-app-text-grey
          leading-20px
          mb="4px lg:8px"
        >
          Project Phase
        </h3>
        <div
          flex
          items-center
          gap-8px
        >
          <div
            h-10px
            w-10px
            rounded-full
            :class=" project.project_status?.version ? 'bg-green' : 'bg-red'"
          /><p
            :class="project.project_status?.version ? 'text-white' : 'text-app-text-grey'"
            leading="20px lg:24px"
          >
            {{ project.project_status?.version ? `${project.project_status?.version?.charAt(0).toUpperCase()}${project.project_status?.version?.slice(1)}` : 'N/A' }}
          </p>
        </div>
      </div>
      <div>
        <h3
          text-app-text-grey
          leading-20px
          mb="4px lg:8px"
        >
          Assets used
        </h3>
        <p
          leading="20px lg:24px"
          :class=" project.assets_used ? '' : 'opacity-50'"
        >
          {{ project.assets_used ? project.assets_used?.map((a) => a.toUpperCase()).join(', ') : 'N/A' }}
        </p>
      </div>
      <div>
        <h3
          text-app-text-grey
          leading-20px
          mb="4px lg:8px"
        >
          Native token
        </h3>
        <p
          leading="20px lg:24px"
          :class=" project.tokens?.length ? '' : 'opacity-50'"
        >
          {{ project.tokens?.length ? project.tokens[0]?.name : 'N/A' }}
        </p>
      </div>
      <div>
        <h3
          text-app-text-grey
          leading-20px
          mb="4px lg:8px"
        >
          Project launch day
        </h3>
        <p
          leading="20px lg:24px"
          :class=" project.product_launch_day ? '' : 'opacity-50'"
        >
          {{ project.product_launch_day ? new Intl.DateTimeFormat('en-UK').format(new Date(project.product_launch_day)) : 'N/A' }}
        </p>
      </div>
    </div>
    <div mt-24px>
      <h3
        text="14px sm:16px app-text-grey"
        leading-20px
      >
        Infrastructure links:
      </h3>
      <div
        grid
        grid-cols-2
        gap-x-16px
        gap-y-12px
        mt-8px
        lg:grid-cols-4
      >
        <ProjectOpenessLink
          v-if="project.links?.web"
          :to="project.links?.web"
        >
          <template #prefix>
            <UnoIcon
              i-ic-baseline-language
              text="24px app-text-grey"
            />
          </template>
          Website
        </ProjectOpenessLink>
        <ProjectOpenessLink
          v-if="project.links?.github"
          :to="project.links?.github"
        >
          <template #prefix>
            <UnoIcon
              i-mdi-github
              text="24px app-text-grey"
              text-27px
            />
          </template>
          Github
        </ProjectOpenessLink>
        <ProjectOpenessLink
          v-if="project.links?.whitepaper"
          :to="project.links?.whitepaper"
        >
          <template #prefix>
            <UnoIcon
              i-material-symbols-description
              text="24px app-text-grey"
              text-27px
            />
          </template>
          Whitepaper
        </ProjectOpenessLink>
        <ProjectOpenessLink
          v-if="project.links?.docs"
          :to="project.links?.docs"
        >
          <template #prefix>
            <UnoIcon
              i-material-symbols-contract
              text="24px app-text-grey"
              text-27px
            />
          </template>
          Docs
        </ProjectOpenessLink>
        <ProjectOpenessLink
          v-if="project.links?.blog"
          :to="project.links.blog"
        >
          <template #prefix>
            <UnoIcon
              i-material-symbols-newsmode
              text="24px app-text-grey"
              text-27px
            />
          </template>
          Blog
        </ProjectOpenessLink>
        <ProjectOpenessLink
          v-if="project.links?.forum"
          :to="project.links.forum"
        >
          <template #prefix>
            <UnoIcon
              i-material-symbols-forum-outline
              text="24px app-text-grey"
              text-27px
            />
          </template>
          Forum
        </ProjectOpenessLink>
        <ProjectOpenessLink
          v-if="project.links?.block_explorer"
          :to="project.links.block_explorer"
        >
          <template #prefix>
            <UnoIcon
              i-material-symbols-explore-outline
              text="24px app-text-grey"
              text-27px
            />
          </template>
          Explorer
        </ProjectOpenessLink>
        <ProjectOpenessLink
          v-if="project.links?.governance"
          :to="project.links.governance"
        >
          <template #prefix>
            <UnoIcon
              i-material-symbols-how-to-vote-outline
              text="24px app-text-grey"
              text-27px
            />
          </template>
          Governance
        </ProjectOpenessLink>
      </div>
    </div>
    <div mt-24px>
      <h3
        text="14px sm:16px app-text-grey"
        leading-20px
      >
        {{ 'Socials' }}
      </h3>
      <div
        grid
        grid-cols-2
        gap-x-16px
        gap-y-12px
        mt-8px
        lg:grid-cols-4
      >
        <ProjectOpenessLink
          v-if="project.links?.twitter"
          :to="project.links.twitter"
        >
          <template #prefix>
            <UnoIcon
              i-bi-twitter-x
              text="24px app-text-grey"
            />
          </template>
          Twitter
        </ProjectOpenessLink>
        <ProjectOpenessLink
          v-if="project.links?.discord"
          :to="project.links.discord"
        >
          <template #prefix>
            <UnoIcon
              i-ic-baseline-discord
              text="24px app-text-grey"
            />
          </template>
          Discord
        </ProjectOpenessLink>
        <ProjectOpenessLink
          v-if="project.links?.telegram"
          :to="project.links.telegram"
        >
          <template #prefix>
            <UnoIcon
              i-mdi-telegram
              text="24px app-text-grey"
            />
          </template>
          Telegram
        </ProjectOpenessLink>
        <ProjectOpenessLink
          v-if="project.links?.lens"
          :to="project.links.lens"
        >
          <template #prefix>
            <UnoIcon
              i-web-lens
              text="24px app-text-grey"
            />
          </template>
          Lens
        </ProjectOpenessLink>
        <ProjectOpenessLink
          v-if="project.links?.farcaster"
          :to="project.links.farcaster"
        >
          <template #prefix>
            <UnoIcon
              i-web-farcaster
              text="24px app-text-grey"
            />
          </template>
          Farcaster
        </ProjectOpenessLink>
      </div>
    </div>
    <ProjectOpenessTeamMembers
      v-if="project?.team?.teammembers"
      :members="project.team?.teammembers"
      mt-24px
    />
    <div mt-32px>
      <h3
        text="app-text-grey 14px lg:16px"
        leading-24px
      >
        Funding
      </h3>
      <div
        v-for="funding of project.funding"
        :key="funding.name"
        flex
        items-center
        justify-between
        rounded-full
        w-full
        bg-app-bg-funding-card
        px-24px
        py-12px
        mt-12px
      >
        <h3
          text="14px lg:16px"
          leading="20px lg:24px"
          font-700
        >
          {{ funding.name }}
        </h3>
        <NuxtLink
          :to="funding.link"
          external
          target="_blank"
        >
          <UnoIcon
            i-ic-twotone-open-in-new
            text="22px app-text-grey"
          />
        </NuxtLink>
      </div>
      <h3
        v-if="!project.funding?.length"
        text="app-text-grey 14px lg:16px"
        leading-24px
      >
        N/A
      </h3>
    </div>
  </ProjectDetailContainer>
</template>