2023-12-19 18:43:42 +01:00
|
|
|
<script lang="ts" setup>
|
2024-09-18 20:46:47 +02:00
|
|
|
import type { Project, ProjectRating } from '~/types'
|
2023-12-19 18:43:42 +01:00
|
|
|
|
|
|
|
const props = defineProps<{
|
|
|
|
project: Project
|
|
|
|
}>()
|
|
|
|
|
2024-09-18 20:46:47 +02:00
|
|
|
const isLargeScreen = useMediaQuery('(min-width: 1024px)')
|
2023-12-19 18:43:42 +01:00
|
|
|
|
2024-09-24 12:14:06 +02:00
|
|
|
const { usecases, ecosystems, categories } = storeToRefs(useData())
|
2024-09-18 20:46:47 +02:00
|
|
|
const selectedMobileRating = ref<ProjectRating>()
|
2023-12-19 18:43:42 +01:00
|
|
|
|
2024-09-18 20:46:47 +02:00
|
|
|
function onSelectMobileRating(rating: ProjectRating) {
|
|
|
|
selectedMobileRating.value = selectedMobileRating.value?.type === rating.type ? undefined : rating
|
|
|
|
}
|
2024-07-22 08:37:20 +02:00
|
|
|
|
2024-09-24 12:14:06 +02:00
|
|
|
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(', ')
|
|
|
|
})
|
|
|
|
|
2023-12-19 18:43:42 +01:00
|
|
|
const logo = props.project?.logos?.at(0)?.url
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<template>
|
2024-09-02 15:13:43 +02:00
|
|
|
<div
|
2024-09-12 08:41:48 +02:00
|
|
|
flex
|
|
|
|
flex-col
|
|
|
|
gap-y-16px
|
|
|
|
lg:flex-row
|
|
|
|
items-center
|
2024-09-02 15:13:43 +02:00
|
|
|
lg:gap-32px
|
|
|
|
>
|
2024-09-23 21:14:17 +02:00
|
|
|
<ClientOnly>
|
|
|
|
<div
|
|
|
|
max-w-200px
|
|
|
|
max-h-200px
|
|
|
|
shrink
|
|
|
|
relative
|
|
|
|
>
|
|
|
|
<NuxtImg
|
|
|
|
border="1px app-text-grey"
|
|
|
|
:src="logo ?? '/no-image-1-1.svg'"
|
|
|
|
class="bg-app-bg-grey object-cover h-full vertical-align[middle] block w-full h-[300px] "
|
|
|
|
/>
|
2024-09-24 12:14:06 +02:00
|
|
|
<div
|
|
|
|
v-if="project.sunset"
|
|
|
|
flex
|
|
|
|
items-center
|
|
|
|
gap-4px
|
|
|
|
absolute
|
|
|
|
top-12px
|
|
|
|
right-12px
|
|
|
|
bg-app-danger
|
|
|
|
text-12px
|
|
|
|
leading-16px
|
|
|
|
font-bold
|
|
|
|
px-8px
|
|
|
|
py-4px
|
|
|
|
rounded-full
|
|
|
|
>
|
|
|
|
<UnoIcon
|
|
|
|
i-material-symbols-dangerous
|
|
|
|
text-16px
|
|
|
|
/>
|
2024-09-23 21:14:17 +02:00
|
|
|
SUNSET
|
2024-09-24 12:14:06 +02:00
|
|
|
<p />
|
2024-09-23 21:14:17 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</ClientOnly>
|
2024-09-12 08:41:48 +02:00
|
|
|
<div
|
|
|
|
grow
|
|
|
|
w-full
|
|
|
|
>
|
2024-09-02 15:13:43 +02:00
|
|
|
<div
|
|
|
|
flex
|
|
|
|
flex-col
|
2024-09-12 08:41:48 +02:00
|
|
|
items-center
|
|
|
|
lg:items-start
|
2024-09-02 15:13:43 +02:00
|
|
|
justify-between
|
2024-09-12 08:41:48 +02:00
|
|
|
gap-y="lg:12px 24px"
|
|
|
|
text-app-text-grey
|
|
|
|
w-full
|
2024-09-02 15:13:43 +02:00
|
|
|
>
|
2024-09-12 08:41:48 +02:00
|
|
|
<div mt-4px>
|
2024-07-22 09:36:53 +02:00
|
|
|
<NuxtLink
|
2024-09-02 15:13:43 +02:00
|
|
|
:to="project.links?.web"
|
|
|
|
target="_blank"
|
|
|
|
flex
|
|
|
|
items-center
|
|
|
|
gap-12px
|
|
|
|
hover:underline
|
2024-07-22 09:36:53 +02:00
|
|
|
underline-offset-3
|
|
|
|
>
|
2024-09-02 15:13:43 +02:00
|
|
|
<h1
|
|
|
|
text="24px sm:32px app-white"
|
|
|
|
leading-32px
|
|
|
|
font-700
|
|
|
|
>
|
2023-12-19 18:43:42 +01:00
|
|
|
{{ project.name }}
|
|
|
|
</h1>
|
2024-09-02 15:13:43 +02:00
|
|
|
<UnoIcon
|
2024-09-12 08:41:48 +02:00
|
|
|
i-ic-twotone-open-in-new
|
|
|
|
text="22px app-white"
|
2024-09-02 15:13:43 +02:00
|
|
|
/>
|
2023-12-19 18:43:42 +01:00
|
|
|
</NuxtLink>
|
|
|
|
</div>
|
2024-07-22 09:36:53 +02:00
|
|
|
<div
|
2024-09-02 15:13:43 +02:00
|
|
|
flex
|
|
|
|
justify-center
|
2024-09-12 08:41:48 +02:00
|
|
|
lg:grid
|
|
|
|
grid-cols-10
|
|
|
|
w-full
|
|
|
|
items-center
|
|
|
|
mt-4px
|
2024-07-22 09:36:53 +02:00
|
|
|
>
|
2024-09-12 08:41:48 +02:00
|
|
|
<h2
|
|
|
|
hidden
|
|
|
|
lg:block
|
|
|
|
>
|
|
|
|
Usecases:
|
|
|
|
</h2>
|
|
|
|
<p
|
|
|
|
text-app-white
|
|
|
|
col-span-9
|
|
|
|
>
|
2024-09-24 12:14:06 +02:00
|
|
|
{{ projectUsecases }}
|
2024-09-12 08:41:48 +02:00
|
|
|
</p>
|
2023-12-19 18:43:42 +01:00
|
|
|
</div>
|
2024-09-12 08:41:48 +02:00
|
|
|
<div
|
|
|
|
grid
|
|
|
|
grid-cols-2
|
|
|
|
gap-y-12px
|
|
|
|
lg:flex
|
|
|
|
lg:flex-col
|
|
|
|
order-3
|
|
|
|
lg:order-2
|
|
|
|
w-full
|
2024-07-22 09:36:53 +02:00
|
|
|
>
|
2024-09-12 08:41:48 +02:00
|
|
|
<div
|
|
|
|
flex
|
|
|
|
flex-col
|
|
|
|
gap-4px
|
|
|
|
lg:grid
|
|
|
|
lg:grid-cols-10
|
|
|
|
lg:items-center
|
|
|
|
w-full
|
|
|
|
>
|
|
|
|
<h2>
|
|
|
|
Categories:
|
|
|
|
</h2>
|
|
|
|
<p
|
|
|
|
text-app-white
|
|
|
|
col-span-9
|
|
|
|
>
|
2024-09-24 12:14:06 +02:00
|
|
|
{{ projectCategories }}
|
2024-09-12 08:41:48 +02:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
flex
|
|
|
|
flex-col
|
|
|
|
gap-4px
|
|
|
|
lg:grid
|
|
|
|
lg:grid-cols-10
|
|
|
|
lg:items-center
|
|
|
|
w-full
|
|
|
|
>
|
|
|
|
<h2>
|
|
|
|
Ecosystems:
|
|
|
|
</h2>
|
|
|
|
<p
|
|
|
|
text-app-white
|
|
|
|
col-span-9
|
|
|
|
>
|
2024-09-24 12:14:06 +02:00
|
|
|
{{ projectEcosystems }}
|
2024-09-12 08:41:48 +02:00
|
|
|
</p>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
grid
|
|
|
|
grid-cols-4
|
|
|
|
w-full
|
|
|
|
items-center
|
|
|
|
order-2
|
|
|
|
lg:order-3
|
2024-09-02 15:13:43 +02:00
|
|
|
>
|
2024-09-12 08:41:48 +02:00
|
|
|
<div
|
|
|
|
flex
|
|
|
|
items-center
|
|
|
|
justify-between
|
|
|
|
lg:justify-start
|
|
|
|
lg:gap-24px
|
|
|
|
col-span-3
|
|
|
|
>
|
|
|
|
<div
|
2024-09-17 08:13:11 +02:00
|
|
|
v-for="rating of project.ratings"
|
|
|
|
:key="rating.name"
|
2024-09-12 08:41:48 +02:00
|
|
|
flex
|
|
|
|
flex-col
|
|
|
|
lg:flex-row
|
2024-09-18 20:46:47 +02:00
|
|
|
gap-y-4px
|
2024-09-12 08:41:48 +02:00
|
|
|
items-center
|
|
|
|
>
|
2024-09-12 11:56:16 +02:00
|
|
|
<p
|
|
|
|
text="12px lg:16px"
|
|
|
|
leading="16px lg:24px"
|
|
|
|
>
|
2024-09-17 08:13:11 +02:00
|
|
|
{{ rating.name }}:
|
2024-09-12 11:56:16 +02:00
|
|
|
</p>
|
2024-09-12 08:41:48 +02:00
|
|
|
<ProjectRating
|
2024-09-17 08:13:11 +02:00
|
|
|
:rating="rating"
|
|
|
|
:percentage="rating.points"
|
2024-09-18 20:46:47 +02:00
|
|
|
:disable-popover="!isLargeScreen"
|
2024-09-12 08:41:48 +02:00
|
|
|
compact
|
2024-09-18 20:46:47 +02:00
|
|
|
:selected="rating.type === selectedMobileRating?.type && !isLargeScreen"
|
|
|
|
@selected="onSelectMobileRating(rating)"
|
2024-09-12 08:41:48 +02:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
flex
|
|
|
|
items-center
|
|
|
|
justify-end
|
|
|
|
w-full
|
|
|
|
gap-16px
|
2024-09-12 11:56:16 +02:00
|
|
|
mt--8px
|
|
|
|
lg:mt-0
|
2024-09-12 08:41:48 +02:00
|
|
|
>
|
|
|
|
<h2
|
|
|
|
hidden
|
|
|
|
lg:block
|
|
|
|
>
|
|
|
|
Total Score:
|
|
|
|
</h2>
|
|
|
|
<div
|
|
|
|
flex
|
|
|
|
items-center
|
|
|
|
justify-center
|
|
|
|
border="2px app-white"
|
|
|
|
text="16px lg:24px app-white"
|
|
|
|
leading="24px md:32px"
|
|
|
|
max-h-="32px md:40px"
|
|
|
|
max-w="84px"
|
|
|
|
w-full
|
|
|
|
h-full
|
|
|
|
font-700
|
|
|
|
whitespace-nowrap
|
|
|
|
py="2px lg:8px"
|
|
|
|
lg:py-4px
|
|
|
|
>
|
2024-09-18 20:46:47 +02:00
|
|
|
{{ project.percentage }} %
|
2024-09-12 08:41:48 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
2024-09-23 21:14:17 +02:00
|
|
|
<div
|
|
|
|
v-if="selectedMobileRating && !isLargeScreen"
|
|
|
|
col-span-4
|
|
|
|
flex
|
|
|
|
items-center
|
|
|
|
justify-center
|
|
|
|
w-full
|
|
|
|
>
|
2024-09-18 20:46:47 +02:00
|
|
|
<ProjectRating
|
|
|
|
:rating="selectedMobileRating"
|
|
|
|
:percentage="selectedMobileRating.points"
|
|
|
|
:disable-popover="!isLargeScreen"
|
|
|
|
compact
|
|
|
|
show-only-popover
|
|
|
|
/>
|
|
|
|
</div>
|
2024-09-12 08:41:48 +02:00
|
|
|
</div>
|
2023-12-19 18:43:42 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|