AstralRinth/packages/ui/src/components/project/ProjectHeader.vue

<template>
  <ContentPageHeader>
    <template #icon>
      <Avatar :src="project.icon_url" :alt="project.title" size="96px" />
    </template>
    <template #title>
      {{ project.title }}
    </template>
    <template #title-suffix>
      <ProjectStatusBadge
        v-if="member || project.status !== 'approved'"
        :status="project.status"
      />
    </template>
    <template #summary>
      {{ project.description }}
    </template>
    <template #stats>
      <div
        v-tooltip="
          `${formatNumber(project.downloads, false)} download${project.downloads !== 1 ? 's' : ''}`
        "
        class="flex items-center gap-2 border-0 border-r border-solid border-divider pr-4 font-semibold cursor-help"
      >
        <DownloadIcon class="h-6 w-6 text-secondary" />
        {{ formatNumber(project.downloads) }}
      </div>
      <div
        v-tooltip="
          `${formatNumber(project.followers, false)} follower${project.downloads !== 1 ? 's' : ''}`
        "
        class="flex items-center gap-2 border-0 border-solid border-divider pr-4 md:border-r cursor-help"
      >
        <HeartIcon class="h-6 w-6 text-secondary" />
        <span class="font-semibold">
          {{ formatNumber(project.followers) }}
        </span>
      </div>
      <div class="hidden items-center gap-2 md:flex">
        <TagsIcon class="h-6 w-6 text-secondary" />
        <div class="flex flex-wrap gap-2">
          <TagItem
            v-for="(category, index) in project.categories"
            :key="index"
          >
            {{ formatCategory(category) }}
          </TagItem>
        </div>
      </div>
    </template>
    <template #actions>
      <slot name="actions" />
    </template>
  </ContentPageHeader>
</template>
<script setup lang="ts">
import { DownloadIcon, HeartIcon, TagsIcon } from '@modrinth/assets'
import Badge from '../base/SimpleBadge.vue'
import Avatar from '../base/Avatar.vue'
import ContentPageHeader from '../base/ContentPageHeader.vue'
import { formatCategory, formatNumber, type Project } from '@modrinth/utils'
import TagItem from '../base/TagItem.vue'
import ProjectStatusBadge from './ProjectStatusBadge.vue'

withDefaults(
  defineProps<{
    project: Project
    member?: boolean
  }>(),
  {
    member: false,
  },
)
</script>