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

<template>
  <div class="flex flex-col gap-3">
    <h2 class="text-lg m-0">{{ formatMessage(messages.title) }}</h2>
    <div class="flex flex-col gap-3 font-semibold [&>div]:flex [&>div]:gap-2 [&>div]:items-center">
      <div>
        <BookTextIcon aria-hidden="true" />
        <div>
          Licensed
          <a
            v-if="project.license.url"
            class="text-link hover:underline"
            :href="project.license.url"
            :target="linkTarget"
            rel="noopener nofollow ugc"
          >
            {{ licenseIdDisplay }}
            <ExternalIcon aria-hidden="true" class="external-icon ml-1 mt-[-1px] inline" />
          </a>
          <span
            v-else-if="
              project.license.id === 'LicenseRef-All-Rights-Reserved' ||
              !project.license.id.includes('LicenseRef')
            "
          >
            {{ licenseIdDisplay }}
          </span>
          <span v-else>{{ licenseIdDisplay }}</span>
        </div>
      </div>
      <div
        v-if="project.approved"
        v-tooltip="dayjs(project.approved).format('MMMM D, YYYY [at] h:mm A')"
      >
        <CalendarIcon aria-hidden="true" />
        <div>
          {{ formatMessage(messages.published, { date: publishedDate }) }}
        </div>
      </div>
      <div v-else v-tooltip="dayjs(project.published).format('MMMM D, YYYY [at] h:mm A')">
        <CalendarIcon aria-hidden="true" />
        <div>
          {{ formatMessage(messages.created, { date: createdDate }) }}
        </div>
      </div>
      <div
        v-if="project.status === 'processing' && project.queued"
        v-tooltip="dayjs(project.queued).format('MMMM D, YYYY [at] h:mm A')"
      >
        <ScaleIcon aria-hidden="true" />
        <div>
          {{ formatMessage(messages.submitted, { date: submittedDate }) }}
        </div>
      </div>
      <div
        v-if="hasVersions && project.updated"
        v-tooltip="dayjs(project.updated).format('MMMM D, YYYY [at] h:mm A')"
      >
        <VersionIcon aria-hidden="true" />
        <div>
          {{ formatMessage(messages.updated, { date: updatedDate }) }}
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { BookTextIcon, CalendarIcon, ScaleIcon, VersionIcon, ExternalIcon } from '@modrinth/assets'
import { useVIntl, defineMessages } from '@vintl/vintl'
import { computed, ref } from 'vue'
import dayjs from 'dayjs'

const { formatMessage } = useVIntl()

const props = defineProps<{
  project: {
    id: string
    published: string
    updated: string
    approved: string
    queued: string
    status: string
    license: {
      id: string
      url: string
    }
  }
  linkTarget: string
  hasVersions: boolean
}>()

const createdDate = computed(() =>
  props.project.published ? dayjs(props.project.published).fromNow() : 'unknown',
)
const submittedDate = computed(() =>
  props.project.queued ? dayjs(props.project.queued).fromNow() : 'unknown',
)
const publishedDate = computed(() =>
  props.project.approved ? dayjs(props.project.approved).fromNow() : 'unknown',
)
const updatedDate = computed(() =>
  props.project.updated ? dayjs(props.project.updated).fromNow() : 'unknown',
)

const licenseIdDisplay = computed(() => {
  const id = props.project.license.id

  if (id === 'LicenseRef-All-Rights-Reserved') {
    return 'ARR'
  } else if (id.includes('LicenseRef')) {
    return id.replaceAll('LicenseRef-', '').replaceAll('-', ' ')
  } else {
    return id
  }
})

const messages = defineMessages({
  title: {
    id: 'project.about.details.title',
    defaultMessage: 'Details',
  },
  licensed: {
    id: 'project.about.details.licensed',
    defaultMessage: 'Licensed {license}',
  },
  created: {
    id: 'project.about.details.created',
    defaultMessage: 'Created {date}',
  },
  submitted: {
    id: 'project.about.details.submitted',
    defaultMessage: 'Submitted {date}',
  },
  published: {
    id: 'project.about.details.published',
    defaultMessage: 'Published {date}',
  },
  updated: {
    id: 'project.about.details.updated',
    defaultMessage: 'Updated {date}',
  },
})
</script>