diff --git a/components/Project/ProjectHeading.vue b/components/Project/ProjectHeading.vue
index c47b566..4720d22 100644
--- a/components/Project/ProjectHeading.vue
+++ b/components/Project/ProjectHeading.vue
@@ -7,12 +7,23 @@ const props = defineProps<{
const isLargeScreen = useMediaQuery('(min-width: 1024px)')
+const { usecases, ecosystems, categories } = storeToRefs(useData())
const selectedMobileRating = ref()
function onSelectMobileRating(rating: ProjectRating) {
selectedMobileRating.value = selectedMobileRating.value?.type === rating.type ? undefined : rating
}
+const projectCategories = computed(() => {
+ return categories.value.filter(cat => props.project.categories.includes(cat.id)).map(cat => cat.name).join(', ')
+})
+const projectUsecases = computed(() => {
+ return usecases.value.filter(u => props.project.usecases?.includes(u.id)).map(u => u.name).join(', ')
+})
+const projectEcosystems = computed(() => {
+ return ecosystems.value.filter(e => props.project.ecosystem?.includes(e.id)).map(e => e.name).join(', ')
+})
+
const logo = props.project?.logos?.at(0)?.url
@@ -37,10 +48,28 @@ const logo = props.project?.logos?.at(0)?.url
:src="logo ?? '/no-image-1-1.svg'"
class="bg-app-bg-grey object-cover h-full vertical-align[middle] block w-full h-[300px] "
/>
-
@@ -100,7 +129,7 @@ const logo = props.project?.logos?.at(0)?.url
text-app-white
col-span-9
>
- Swap, Mixer
+ {{ projectUsecases }}
- Dapp, Network
+ {{ projectCategories }}
- Ethereum, Secret Network
+ {{ projectEcosystems }}