explorer-app/components/Project/ProjectOpenessTeamMembers.vue
2024-09-12 11:56:16 +02:00

81 lines
1.6 KiB
Vue

<script setup lang="ts">
const props = defineProps<{
members: {
name: string
role?: string
link?: string
}[] | undefined
}>()
</script>
<template>
<div>
<h3
text="14px sm:16px app-text-grey"
leading-24px
>
{{ 'Team members' }}
</h3>
<div
grid
grid-cols-1
gap-16px
mt-12px
sm:grid-cols-2
md:grid-cols-3
lg:grid-cols-4
>
<template v-if="props.members?.length">
<template
v-for="member in members"
:key="member.name"
>
<div
flex
items-center
gap-12px
>
<!-- <template v-if="member.link">
<NuxtImg
:src="member.link"
width="48"
height="48"
:alt="member.name"
/>
</template> -->
<div
flex
items-center
justify-center
text-black
w="40px lg:48px"
h="40px lg:48px"
rounded-full
bg-app-bg-team-grey
>
<div
i-heroicons-solid-user
text-24px
/>
</div>
<div
flex
flex-col
>
<span
text="14px sm:16px"
font-700
>{{ member.name }}</span>
</div>
</div>
</template>
</template>
<template v-else>
<span
text-14px
opacity-50
>{{ 'N/A' }}</span>
</template>
</div>
</div>
</template>