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

91 lines
3.7 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<script lang="ts" setup>
import type { Project } from '~/types'
const props = defineProps<{
project: Project
}>()
const availableSupport = computed(() => {
const filteredKeys = ['forum', 'discord', 'twitter', 'lens', 'farcaster', 'telegram']
if (typeof props.project.links === 'object' && (props.project.links !== null || props.project.links !== undefined))
return Object.keys(props.project.links).filter(key => filteredKeys.includes(key)).length
return 0
})
const logo = props.project?.logos?.at(0)?.url
</script>
<template>
<div lg:flex lg:gap-32px>
<NuxtImg lg:max-w-320px lg:max-h-320px shrink :src="logo ?? '/no-image-1-1.svg'" class="bg-app-bg-grey object-cover max-w-full h-full vertical-align[middle] block border-0 w-full h-[300px]" />
<div grow>
<div flex flex-col justify-between gap-32px lg:flex-row lg:items-center>
<div mt-24px>
<NuxtLink :to="project.links?.web" target="_blank" flex items-center gap-12px hover:underline underline-offset-3>
<h1 text="24px sm:32px app-white" leading-32px font-700>
{{ project.name }}
</h1>
<UnoIcon i-web-openinnew text-16px />
</NuxtLink>
<h2 text="16px app-text-grey" leading-24px mt-8px>
{{ project.project_type ?? '---' }}
</h2>
</div>
<div
border-2px
class="border-app-black bg-app-white text-app-black"
flex items-center justify-center px-32px py-16px text-32px font-700 leading-40px cursor-pointer
>
{{ '63%' }}
</div>
</div>
<div grid grid-cols-2 gap-16px my-32px lg:grid-cols-4>
<ProjectInfoItem :check-undefined="project.links?.github" title="Github" bold text-size="18px">
<template #prefix>
<UnoIcon i-web-code />
</template>
{{ project.links?.github ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.project_status?.version" title="Product readyness" bold text-size="18px">
<template #prefix>
<UnoIcon i-web-cube />
</template>
{{ project.project_status?.version }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.team?.length" title="Team" bold text-size="18px">
<template #prefix>
<UnoIcon i-web-team />
</template>
{{ `${project.team?.length} members` }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.links?.docs" title="Docs" bold text-size="18px">
<template #prefix>
<UnoIcon i-web-docs text-28px />
</template>
{{ project.links?.docs ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.audits" title="Audit" bold text-size="18px">
<template #prefix>
<UnoIcon i-web-audit text-28px />
</template>
{{ project.audits ? 'YES' : 'NO' }}
</ProjectInfoItem>
<ProjectInfoItem :check-undefined="project.links" title="Available support" bold text-size="18px">
<template #prefix>
<UnoIcon i-web-support text-28px />
</template>
{{ `${availableSupport} channels` }}
</ProjectInfoItem>
</div>
<div grid grid-cols-2 gap-16px my-32px lg:grid-cols-4>
<ProjectInfoItem :check-undefined="project.blockchain_features?.network" tooltip-link="/" title="Ecosystem" bold>
{{ project.blockchain_features?.network }}
</ProjectInfoItem>
<ProjectInfoItem invisible title="Last update" bold>
17/11/2023 23:22
</ProjectInfoItem>
</div>
</div>
</div>
</template>