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] " /> -
- +
+ SUNSET -

+

@@ -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 }}