explorer-app/components/Project/ProjectHeading.vue
Daniel Klein 3b553f551d chore(eslint): update eslint rules
fix(lint): resolve lint errors
2024-09-02 15:13:43 +02:00

251 lines
6.2 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, ProjectIndexable } 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
})
/**
* From data points
- product readiness
- docs (yes/no)
- github (yes/no)
- team: anon / public
- audit: yes / no
*/
const calculateScore = computed(() => {
const criterias: { value: keyof ProjectIndexable, key: keyof ProjectIndexable | '' }[] = [
{ value: 'product_readiness', key: '' },
{ value: 'github', key: 'links' },
{ value: 'docs', key: 'links' },
{ value: 'team', key: '' },
{ value: 'audits', key: '' },
]
let matched = 0
for (let i = 0; i < criterias.length; i++) {
let value
// value = ((criterias[i].key ?? props.project[criterias[i].value as keyof typeof props.project]) ?? null === null) ? null : (props.project as ProjectIndexable)[criterias[i].key][criterias[i].value]
const indexableProject = props.project as ProjectIndexable
if (criterias[i].key !== '')
value = (indexableProject[criterias[i].key] as any)?.[criterias[i].value]
else
value = indexableProject?.[criterias[i].value]
// console.log(props.project?.links?.github);
// console.log(Object.keys(props.indexableProject["team"]).length);
if (value === null || value === undefined)
continue
if (fulfilled(value))
matched++
}
return 100 / criterias.length * matched
})
function fulfilled(value: any): boolean {
const type = typeof value
switch (type) {
case 'string':
if (value !== '')
return true
break
case 'object':
if (Object.keys(value!).length > 0)
return true
break
default:
return false
}
return false
}
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
>
{{ `${calculateScore}%` }}
</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>