explorer-app/components/Project/ProjectOpenessTeamMembers.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>
            <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>