explorer-app/components/Project/ProjectOpeness.vue

365 lines
8.3 KiB
Vue
Raw Normal View History

2023-12-19 18:43:42 +01:00
<script setup lang="ts">
import type { Project } from '~/types'
defineProps<{
project: Project
}>()
</script>
<template>
<ProjectDetailCategoryDivider
title="OPENESS"
badge-text="3/10"
>
<UnoIcon
2024-09-12 08:41:48 +02:00
i-bi-code-square
text-24px
/>
2023-12-19 18:43:42 +01:00
</ProjectDetailCategoryDivider>
<ProjectDetailContainer>
<div
mt-32px
text="14px sm:16px"
leading-24px
font-400
>
2024-09-12 08:41:48 +02:00
<h3
text-app-text-grey
mb-8px
>
Project Description
2023-12-19 18:43:42 +01:00
</h3>
2024-09-12 08:41:48 +02:00
<p
text="14px sm:16px"
leading-20px
2024-09-12 08:41:48 +02:00
>
{{ project.description ?? '---' }}
</p>
</div>
<div
grid
grid-cols="2 lg:4"
mt="24px lg:32px"
text="14px lg:16px"
gap-y-16px
>
<div>
<h3
text-app-text-grey
leading-20px
mb="4px lg:8px"
>
Project Phase
</h3>
<div
flex
items-center
gap-8px
>
<div
h-10px
w-10px
rounded-full
bg-green
/><p leading="20px lg:24px">
Mainnet
</p>
</div>
</div>
<div>
<h3
text-app-text-grey
leading-20px
mb="4px lg:8px"
>
Assets used
</h3>
2024-09-27 12:14:49 +02:00
<p
leading="20px lg:24px"
:class=" project.assets_used ? '' : 'opacity-50'"
>
{{ project.assets_used ? project.assets_used?.map((a) => a.toUpperCase()).join(', ') : 'N/A' }}
2024-09-12 08:41:48 +02:00
</p>
</div>
<div>
<h3
text-app-text-grey
leading-20px
mb="4px lg:8px"
>
Native token
</h3>
2024-09-27 12:14:49 +02:00
<p
leading="20px lg:24px"
:class=" project.tokens?.length ? '' : 'opacity-50'"
>
2024-09-20 14:25:55 +02:00
{{ project.tokens?.length ? project.tokens[0]?.name : 'N/A' }}
2024-09-12 08:41:48 +02:00
</p>
</div>
<div>
<h3
text-app-text-grey
leading-20px
mb="4px lg:8px"
>
Project launch day
</h3>
2024-09-27 12:14:49 +02:00
<p
leading="20px lg:24px"
:class=" project.product_launch_day ? '' : 'opacity-50'"
>
{{ project.product_launch_day || 'N/A' }}
2024-09-12 08:41:48 +02:00
</p>
</div>
2023-12-19 18:43:42 +01:00
</div>
<div mt-24px>
<h3
text="14px sm:16px app-text-grey"
leading-20px
>
2024-09-12 08:41:48 +02:00
Infrastructure links:
2023-12-19 18:43:42 +01:00
</h3>
<div
grid
grid-cols-2
2024-09-12 08:41:48 +02:00
gap-x-16px
gap-y-12px
mt-8px
lg:grid-cols-4
>
<ProjectOpenessLink
v-if="project.links?.web"
:to="project.links?.web"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
2024-09-12 08:41:48 +02:00
<UnoIcon
i-ic-baseline-language
text="24px app-text-grey"
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Website
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
<ProjectOpenessLink
2024-09-12 08:41:48 +02:00
v-if="project.links?.github"
:to="project.links?.github"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
2024-09-12 08:41:48 +02:00
<UnoIcon
i-mdi-github
text="24px app-text-grey"
text-27px
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Github
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
<ProjectOpenessLink
2024-09-12 08:41:48 +02:00
v-if="project.links?.whitepaper"
:to="project.links?.whitepaper"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
<UnoIcon
2024-09-12 08:41:48 +02:00
i-material-symbols-description
text="24px app-text-grey"
text-27px
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Whitepaper
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.docs"
:to="project.links?.docs"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
<UnoIcon
2024-09-12 08:41:48 +02:00
i-material-symbols-contract
text="24px app-text-grey"
text-27px
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Docs
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
<ProjectOpenessLink
2024-09-12 08:41:48 +02:00
v-if="project.links?.blog"
:to="project.links.blog"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
<UnoIcon
2024-09-12 08:41:48 +02:00
i-material-symbols-newsmode
text="24px app-text-grey"
text-27px
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Blog
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
<ProjectOpenessLink
2024-09-12 08:41:48 +02:00
v-if="project.links?.forum"
:to="project.links.forum"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
<UnoIcon
2024-09-12 08:41:48 +02:00
i-material-symbols-forum-outline
text="24px app-text-grey"
text-27px
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Forum
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
<ProjectOpenessLink
2024-09-12 08:41:48 +02:00
v-if="project.links?.block_explorer"
:to="project.links.block_explorer"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
<UnoIcon
2024-09-12 08:41:48 +02:00
i-material-symbols-explore-outline
text="24px app-text-grey"
text-27px
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Explorer
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
<ProjectOpenessLink
2024-09-12 08:41:48 +02:00
v-if="project.links?.governance"
:to="project.links.governance"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
<UnoIcon
2024-09-12 08:41:48 +02:00
i-material-symbols-how-to-vote-outline
text="24px app-text-grey"
text-27px
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Governance
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
</div>
</div>
<div mt-24px>
<h3
text="14px sm:16px app-text-grey"
leading-20px
>
2023-12-19 18:43:42 +01:00
{{ 'Socials' }}
</h3>
<div
grid
grid-cols-2
2024-09-12 08:41:48 +02:00
gap-x-16px
gap-y-12px
mt-8px
lg:grid-cols-4
>
<ProjectOpenessLink
2024-09-12 08:41:48 +02:00
v-if="project.links?.twitter"
:to="project.links.twitter"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
<UnoIcon
2024-09-12 08:41:48 +02:00
i-bi-twitter-x
text="24px app-text-grey"
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Twitter
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.discord"
:to="project.links.discord"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
<UnoIcon
2024-09-12 08:41:48 +02:00
i-ic-baseline-discord
text="24px app-text-grey"
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Discord
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
<ProjectOpenessLink
2024-09-12 08:41:48 +02:00
v-if="project.links?.telegram"
:to="project.links.telegram"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
<UnoIcon
2024-09-12 08:41:48 +02:00
i-mdi-telegram
text="24px app-text-grey"
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Telegram
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.lens"
:to="project.links.lens"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
<UnoIcon
i-web-lens
2024-09-12 08:41:48 +02:00
text="24px app-text-grey"
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Lens
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
<ProjectOpenessLink
v-if="project.links?.farcaster"
:to="project.links.farcaster"
>
2023-12-19 18:43:42 +01:00
<template #prefix>
<UnoIcon
i-web-farcaster
2024-09-12 08:41:48 +02:00
text="24px app-text-grey"
/>
2023-12-19 18:43:42 +01:00
</template>
2024-09-12 08:41:48 +02:00
Farcaster
2023-12-19 18:43:42 +01:00
</ProjectOpenessLink>
</div>
</div>
2024-09-12 08:41:48 +02:00
<ProjectOpenessTeamMembers
v-if="project?.team?.teammembers"
:members="project.team?.teammembers"
2024-09-12 08:41:48 +02:00
mt-24px
/>
<div mt-32px>
<h3
text="app-text-grey 14px lg:16px"
leading-24px
2023-12-19 18:43:42 +01:00
>
2024-09-12 08:41:48 +02:00
Funding
</h3>
<div
v-for="funding of project.funding"
:key="funding.name"
2024-09-12 08:41:48 +02:00
flex
items-center
justify-between
rounded-full
2023-12-19 18:43:42 +01:00
w-full
2024-09-12 08:41:48 +02:00
bg-app-bg-funding-card
px-24px
py-12px
mt-12px
2023-12-19 18:43:42 +01:00
>
2024-09-12 08:41:48 +02:00
<h3
text="14px lg:16px"
leading="20px lg:24px"
font-700
>
{{ funding.name }}
2024-09-12 08:41:48 +02:00
</h3>
<NuxtLink
:to="funding.link"
2024-09-12 08:41:48 +02:00
external
target="_blank"
>
<UnoIcon
i-ic-twotone-open-in-new
text="22px app-text-grey"
/>
</NuxtLink>
</div>
<h3
v-if="!project.funding?.length"
2024-09-12 08:41:48 +02:00
text="app-text-grey 14px lg:16px"
leading-24px
>
N/A
</h3>
2023-12-19 18:43:42 +01:00
</div>
</ProjectDetailContainer>
</template>