explorer-app/components/Card.vue
2023-12-19 18:43:42 +01:00

91 lines
4.6 KiB
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 '">
<NuxtImg :src="project?.image || '/no-image-1-1.svg'" class="w-full h-full" z-10 object-cover />
<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>