explorer-app/components/Card.vue

248 lines
6.3 KiB
Vue
Raw Normal View History

2023-12-19 18:43:42 +01:00
<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
2023-12-19 18:43:42 +01:00
>
<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"
/>
2024-01-10 10:45:39 +01:00
</div>
2023-12-19 18:43:42 +01:00
<ClientOnly>
<Badge
v-if="project.percentage"
absolute
bottom-0.5
lg:bottom-0
right-0.5
lg:right-0
mr-2px
mb-2px
2023-12-19 18:43:42 +01:00
:text="`${project.percentage}%`"
class="leading-12px! text-12px! lg:text-18px! border-0!"
px="4px! lg:16px!"
py="4px! lg:8px!"
2023-12-19 18:43:42 +01:00
/>
</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
>
2023-12-19 18:43:42 +01:00
{{ project.title1 }}
</h1>
<UnoIcon
i-web-open
text-16px
/>
2023-12-19 18:43:42 +01:00
</div>
<h2
text="14px app-text-grey"
overflow-hidden
text-ellipsis
line-clamp-2
lg:line-clamp-2
>
2023-12-19 18:43:42 +01:00
{{ 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
>
2023-12-19 18:43:42 +01:00
<ProjectInfoItem
:check-undefined="project?.github"
:link="project?.github"
title="Github"
bold
text-size="18px"
2023-12-19 18:43:42 +01:00
>
<div
flex
items-center
gap-8px
>
<UnoIcon
i-web-github
text-16px
/>
2023-12-19 18:43:42 +01:00
<span>{{ project?.github ? 'YES' : 'NO' }}</span>
</div>
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project.readyness"
title="Readyness"
text-size="18px"
2023-12-19 18:43:42 +01:00
>
<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' : ''"
/>
2023-12-19 18:43:42 +01:00
<span :class="(project.readyness === 'Alpha') ? 'color-#FFA800' : 'color-white'">{{ project.readyness }}</span>
</div>
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="true"
title="Team"
text-size="18px"
>
2023-12-19 18:43:42 +01:00
<span v-if="project.team?.length">{{ `${project.team?.length} members` }}</span>
<span
v-else
color="#FF0000"
>{{ 'Anonymous' }}</span>
2023-12-19 18:43:42 +01:00
</ProjectInfoItem>
<ProjectInfoItem
:check-undefined="project?.docs"
:link="project?.docs"
:color="project?.docs ? '#18FF2F' : '#FF0000'"
title="Docs"
bold
text-size="18px"
2023-12-19 18:43:42 +01:00
>
{{ 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"
2023-12-19 18:43:42 +01:00
>
{{ 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' } })"
/>
2023-12-19 18:43:42 +01:00
</div>
</div>
</div>
</NuxtLink>
</template>