explorer-app/components/Project/ProjectHeading.vue

286 lines
6.5 KiB
Vue
Raw Normal View History

2023-12-19 18:43:42 +01:00
<script lang="ts" setup>
import type { Project, ProjectRating } from '~/types'
2023-12-19 18:43:42 +01:00
const props = defineProps<{
project: Project
}>()
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())
const selectedMobileRating = ref<ProjectRating>()
2023-12-19 18:43:42 +01:00
function onSelectMobileRating(rating: ProjectRating) {
selectedMobileRating.value = selectedMobileRating.value?.type === rating.type ? undefined : rating
}
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>
<div
2024-09-12 08:41:48 +02:00
flex
flex-col
gap-y-16px
lg:flex-row
items-center
lg:gap-32px
>
2024-09-23 21:14:17 +02:00
<ClientOnly>
<div
2024-09-24 12:56:42 +02:00
w-full
2024-09-23 21:14:17 +02:00
max-w-200px
max-h-200px
shrink
relative
>
<NuxtImg
: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
>
<div
flex
flex-col
2024-09-12 08:41:48 +02:00
items-center
lg:items-start
justify-between
2024-09-27 12:14:49 +02:00
gap-y="12px"
2024-09-12 08:41:48 +02:00
text-app-text-grey
w-full
>
2024-09-12 08:41:48 +02:00
<div mt-4px>
2024-07-22 09:36:53 +02:00
<NuxtLink
:to="project.links?.web"
target="_blank"
flex
items-center
gap-12px
hover:underline
2024-07-22 09:36:53 +02:00
underline-offset-3
>
<h1
text="24px sm:32px app-white"
leading-32px
font-700
>
2023-12-19 18:43:42 +01:00
{{ project.name }}
</h1>
<UnoIcon
2024-09-12 08:41:48 +02:00
i-ic-twotone-open-in-new
text="22px app-white"
/>
2023-12-19 18:43:42 +01:00
</NuxtLink>
</div>
2024-07-22 09:36:53 +02:00
<div
flex
justify-center
2024-09-12 08:41:48 +02:00
lg:grid
2024-10-03 15:53:44 +02:00
grid-cols-8
2024-09-12 08:41:48 +02:00
w-full
items-center
2024-07-22 09:36:53 +02:00
>
2024-09-12 08:41:48 +02:00
<h2
hidden
lg:block
>
Usecases:
</h2>
<p
2024-10-03 15:53:44 +02:00
mb-8px
lg="mb-0 mt-0"
2024-09-12 08:41:48 +02:00
text-app-white
2024-10-03 15:53:44 +02:00
col-span-7
2024-09-12 08:41:48 +02:00
>
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
2024-10-03 15:53:44 +02:00
lg:grid-cols-8
2024-09-12 08:41:48 +02:00
lg:items-center
w-full
>
<h2>
Categories:
</h2>
<p
text-app-white
2024-10-03 15:53:44 +02:00
col-span-7
2024-09-12 08:41:48 +02:00
>
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
2024-10-03 15:53:44 +02:00
lg:grid-cols-8
2024-09-12 08:41:48 +02:00
lg:items-center
w-full
>
<h2>
Ecosystems:
</h2>
<p
text-app-white
2024-10-03 15:53:44 +02:00
col-span-7
2024-09-12 08:41:48 +02:00
>
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-10-03 15:53:44 +02:00
lg:ml-0
ml--12px
>
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
gap-y-4px
2024-09-27 12:14:49 +02:00
md:items-center
items-start
2024-09-12 08:41:48 +02:00
>
<p
text="12px lg:16px"
leading="16px lg:24px"
2024-09-27 12:14:49 +02:00
md:ml-0
ml-10px
>
2024-09-17 08:13:11 +02:00
{{ rating.name }}:
</p>
2024-09-12 08:41:48 +02:00
<ProjectRating
2024-09-17 08:13:11 +02:00
:rating="rating"
:percentage="rating.percentagePoints"
:disable-popover="!isLargeScreen"
2024-09-12 08:41:48 +02:00
compact
: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
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"
2024-09-27 12:14:49 +02:00
max-w="md:84px 64px"
2024-09-12 08:41:48 +02:00
w-full
h-full
font-700
whitespace-nowrap
py="2px lg:8px"
lg:py-4px
>
{{ 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
>
<ProjectRating
:rating="selectedMobileRating"
:percentage="selectedMobileRating.percentagePoints"
: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>