explorer-app/components/Card.vue

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

defineProps<{
  project: ProjectShallow
}>()
const { switcher } = storeToRefs(useData())
</script>

<template>
  <NuxtLink
    :to="`/project/${project.id}`"
    :class="switcher ? 'flex-row' : 'lg:flex-col'"
    flex
    w-full
    gap-16px
    hover:bg="#121212"
    transition-all
  >
    <div
      relative
      max-w="96px lg:200px"
      w-full
      h="96px lg:200px"
      :class="switcher ? '' : 'lg:max-w-full! lg:w-full '"
    >
      <div
        flex
        items-center
        justify-center
        w-full
        my-auto
        h-full
      >
        <NuxtImg
          :src="project?.image || '/no-image-1-1.svg'"
          class="w-full h-auto"
          max-h="md:196px 96px"
          self-center
          z-10
          object-fit
          bg="#121212"
        />
      </div>
      <ClientOnly>
        <Badge
          v-if="project.percentage"
          absolute
          bottom-0.5
          lg:bottom-0
          right-0.5
          lg:right-0
          mr-2px
          mb-2px
          :text="`${project.percentage}%`"
          class="leading-12px! text-12px! lg:text-18px! border-0!"
          px="4px! lg:16px!"
          py="4px! lg:8px!"
        />
      </ClientOnly>
    </div>
    <div
      h="96px lg:200px"
      lg:py-24px
      lg:pr-24px
      flex
      flex-col
      justify-center
      lg:justify-between
      lg:gap-24px
      w-full
      text-white
      :class="switcher ? '' : 'lg:p-16px! lg:py-16px!'"
    >
      <div
        w-full
        h-fit
        flex
        flex-col
        gap-8px
      >
        <div
          w-fit
          flex
          items-center
          gap-8px
          @click.prevent="navigateTo(project.website, { external: true, open: { target: '_blank' } })"
        >
          <h1
            text="18px lg:24px app-white"
            font-700
            line-clamp-1
            hover:underline
            underline-offset-3
          >
            {{ project.title1 }}
          </h1>
          <UnoIcon
            i-web-open
            text-16px
          />
        </div>
        <h2
          text="14px app-text-grey"
          overflow-hidden
          text-ellipsis
          line-clamp-2
          lg:line-clamp-2
        >
          {{ project.description }}
        </h2>
      </div>
      <div
        w-full
        flex
        justify-between
      >
        <div
          w-full
          max-w-692px
          grid
          whitespace-nowrap
          :class="switcher ? 'grid-cols-5' : 'grid-cols-3'"
          gap-24px
          lg:grid
          hidden
        >
          <ProjectInfoItem
            :check-undefined="project?.github"
            :link="project?.github"
            title="Github"
            bold
            text-size="18px"
          >
            <div
              flex
              items-center
              gap-8px
            >
              <UnoIcon
                i-web-github
                text-16px
              />
              <span>{{ project?.github ? 'YES' : 'NO' }}</span>
            </div>
          </ProjectInfoItem>
          <ProjectInfoItem
            :check-undefined="project.readyness"
            title="Readyness"
            text-size="18px"
          >
            <div
              flex
              items-center
              gap-12px
            >
              <UnoIcon
                i-web-live
                text-10px
                :class="(project.readyness === 'Mainnet') ? 'color-#18FF2F' : (project.readyness === 'Testnet') ? 'color-#FFA800' : (project.readyness === 'Alpha') ? 'color-#FF0000' : ''"
              />
              <span :class="(project.readyness === 'Alpha') ? 'color-#FFA800' : 'color-white'">{{ project.readyness }}</span>
            </div>
          </ProjectInfoItem>
          <ProjectInfoItem
            :check-undefined="true"
            title="Team"
            text-size="18px"
          >
            <span v-if="project.team?.length">{{ `${project.team?.length} members` }}</span>
            <span
              v-else
              color="#FF0000"
            >{{ 'Anonymous' }}</span>
          </ProjectInfoItem>
          <ProjectInfoItem
            :check-undefined="project?.docs"
            :link="project?.docs"
            :color="project?.docs ? '#18FF2F' : '#FF0000'"
            title="Docs"
            bold
            text-size="18px"
          >
            {{ project?.docs ? 'YES' : 'NO' }}
          </ProjectInfoItem>
          <ProjectInfoItem
            :check-undefined="project.audits"
            :link="project?.audits?.[0]?.link ?? undefined"
            :color="project?.audits ? '#18FF2F' : '#FF0000'"
            title="Audit"
            bold
            text-size="18px"
          >
            {{ project.audits ? 'YES' : 'NO' }}
          </ProjectInfoItem>
        </div>
        <div
          hidden
          lg:flex
          items-center
          gap-16px
        >
          <UnoIcon
            v-if="project.forum"
            i-web-forum
            text-28px
            opacity-50
            hover:opacity-100
            @click.prevent="navigateTo(project.forum, { external: true, open: { target: '_blank' } })"
          />
          <UnoIcon
            v-if="project.explorer"
            i-web-explorer
            text-32px
            opacity-50
            hover:opacity-100
            @click.prevent="navigateTo(project.explorer, { external: true, open: { target: '_blank' } })"
          />
          <UnoIcon
            v-if="project.twitter"
            i-web-twitter_x
            text-22px
            opacity-50
            hover:opacity-100
            @click.prevent="navigateTo(project.twitter, { external: true, open: { target: '_blank' } })"
          />
          <UnoIcon
            v-if="project.coingecko"
            i-web-coingecko
            text-24px
            opacity-50
            hover:opacity-100
            @click.prevent="navigateTo(project.coingecko, { external: true, open: { target: '_blank' } })"
          />
          <UnoIcon
            v-if="project.newsletter"
            i-web-news
            text-28px
            opacity-50
            hover:opacity-100
            @click.prevent="navigateTo(project.newsletter, { external: true, open: { target: '_blank' } })"
          />
        </div>
      </div>
    </div>
  </NuxtLink>
</template>