82 lines
1.6 KiB
Vue
82 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>
|