Modrinth/components/ui/ProjectCard.vue

<template>
  <article class="project-card card">
    <div class="columns">
      <div class="icon">
        <nuxt-link :to="`/${type}/${id}`">
          <img
            :src="iconUrl || 'https://cdn.modrinth.com/placeholder.svg?inline'"
            :alt="name"
            loading="lazy"
          />
        </nuxt-link>
        <Categories :categories="categories" class="left-categories" />
      </div>
      <div class="card-content">
        <div class="info">
          <div class="top">
            <h2 class="title">
              <nuxt-link :to="`/${type}/${id}`">{{ name }}</nuxt-link>
            </h2>
            <p v-if="author" class="author">
              by <nuxt-link :to="'/user/' + author">{{ author }}</nuxt-link>
            </p>
          </div>
          <div class="side-type">
            <div
              v-if="clientSide === 'optional' && serverSide === 'optional'"
              class="side-descriptor"
            >
              <InfoIcon />
              Universal {{ type }}
            </div>
            <div
              v-else-if="
                (clientSide === 'optional' || clientSide === 'required') &&
                (serverSide === 'optional' || serverSide === 'unsupported')
              "
              class="side-descriptor"
            >
              <InfoIcon />
              Client {{ type }}
            </div>
            <div
              v-else-if="
                (serverSide === 'optional' || serverSide === 'required') &&
                (clientSide === 'optional' || clientSide === 'unsupported')
              "
              class="side-descriptor"
            >
              <InfoIcon />
              Server {{ type }}
            </div>
          </div>
          <p class="description">
            {{ description }}
          </p>
          <Categories :categories="categories" class="right-categories" />
          <div class="dates">
            <div class="date">
              <CalendarIcon />
              Created {{ $dayjs(createdAt).fromNow() }}
            </div>
            <div class="date">
              <EditIcon />
              Updated {{ $dayjs(updatedAt).fromNow() }}
            </div>
          </div>
        </div>
        <div class="right-side">
          <div v-if="downloads" class="stat">
            <DownloadIcon />
            <p>
              <strong>{{ formatNumber(downloads) }}</strong> downloads
            </p>
          </div>
          <div v-if="follows" class="stat">
            <HeartIcon />
            <p>
              <strong>{{ formatNumber(follows) }}</strong> followers
            </p>
          </div>
          <div v-if="status" class="status">
            <Badge
              v-if="status === 'approved'"
              color="green custom-circle"
              :type="status"
            />
            <Badge
              v-else-if="status === 'processing' || status === 'archived'"
              color="yellow custom-circle"
              :type="status"
            />
            <Badge
              v-else-if="status === 'rejected'"
              color="red custom-circle"
              :type="status"
            />
            <Badge v-else color="gray custom-circle" :type="status" />
          </div>
          <div class="buttons">
            <slot />
          </div>
        </div>
      </div>
    </div>
  </article>
</template>

<script>
import Categories from '~/components/ui/search/Categories'
import Badge from '~/components/ui/Badge'

import InfoIcon from '~/assets/images/utils/info.svg?inline'
import CalendarIcon from '~/assets/images/utils/calendar.svg?inline'
import EditIcon from '~/assets/images/utils/updated.svg?inline'
import DownloadIcon from '~/assets/images/utils/download-alt.svg?inline'
import HeartIcon from '~/assets/images/utils/heart.svg?inline'

export default {
  name: 'ProjectCard',
  components: {
    Categories,
    Badge,
    InfoIcon,
    CalendarIcon,
    EditIcon,
    DownloadIcon,
    HeartIcon,
  },
  props: {
    id: {
      type: String,
      default: 'modrinth-0',
    },
    type: {
      type: String,
      default: 'mod',
    },
    name: {
      type: String,
      default: 'Project Name',
    },
    author: {
      type: String,
      default: null,
    },
    description: {
      type: String,
      default: 'A _type description',
    },
    iconUrl: {
      type: String,
      default: '#',
      required: false,
    },
    downloads: {
      type: String,
      default: null,
      required: false,
    },
    follows: {
      type: String,
      default: null,
      required: false,
    },
    createdAt: {
      type: String,
      default: '0000-00-00',
    },
    updatedAt: {
      type: String,
      default: null,
    },
    categories: {
      type: Array,
      default() {
        return []
      },
    },
    status: {
      type: String,
      default: null,
    },
    serverSide: {
      type: String,
      required: false,
      default: '',
    },
    clientSide: {
      type: String,
      required: false,
      default: '',
    },
  },
  methods: {
    formatNumber(x) {
      return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
    },
  },
}
</script>

<style lang="scss" scoped>
.columns {
  width: 100%;
}

.project-card {
  display: flex;
  flex-direction: row;
  flex-direction: column;
  padding: var(--spacing-card-bg);
  width: calc(100% - 2 * var(--spacing-card-bg));

  @media screen and (min-width: 1024px) {
    flex-direction: row;
    justify-content: space-between;
  }

  .icon {
    img {
      width: 6rem;
      height: 6rem;
      margin: 0 var(--spacing-card-md) var(--spacing-card-md) 0;
      border-radius: var(--size-rounded-icon);
      object-fit: contain;
    }
  }

  .card-content {
    display: flex;
    justify-content: space-between;
    flex-grow: 1;

    .info {
      display: flex;
      flex-direction: column;

      .top {
        align-items: baseline;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        flex-shrink: 0;
        margin-right: var(--spacing-card-md);

        .title {
          margin: 0 0.5rem 0 0;
          color: var(--color-text-dark);
          font-size: var(--font-size-xl);
        }

        .author {
          margin: auto 0 0 0;
          color: var(--color-text);

          a {
            text-decoration: underline;
          }
        }
      }

      .side-descriptor {
        display: flex;
        align-items: center;
        font-weight: bolder;
        font-size: var(--font-size-sm);

        margin-top: 0.125rem;
        margin-bottom: 0.5rem;

        svg {
          width: auto;
          height: 1rem;
          margin-right: 0.125rem;
        }
      }

      .description {
        margin: var(--spacing-card-sm) var(--spacing-card-md)
          var(--spacing-card-sm) 0;
      }

      .right-categories {
        margin-bottom: var(--spacing-card-sm);
      }

      .dates {
        display: flex;
        flex-wrap: wrap;

        .date {
          display: flex;
          align-items: center;
          margin-right: 2rem;

          svg {
            height: 1.25rem;
            margin-right: 0.125rem;
          }
        }
      }
    }

    .right-side {
      min-width: 8.75rem;
      text-align: right;

      .stat {
        display: flex;
        align-items: center;
        margin-bottom: 0.5rem;

        svg {
          width: auto;
          height: 1.25rem;

          margin-left: auto;
          margin-right: 0.25rem;
        }

        p {
          margin: 0;

          strong {
            font-weight: bolder;
            font-size: var(--font-size-lg);
          }
        }
      }

      .status {
        margin-bottom: 0.5rem;
      }

      .buttons {
        display: flex;
        flex-direction: column;

        button,
        a {
          margin-right: 0;
          margin-left: auto;
          margin-bottom: 0.5rem;
        }
      }
    }
  }

  .left-categories {
    display: none;
  }

  @media screen and (max-width: 560px) {
    .card-content {
      flex-direction: column;
      .right-side {
        padding-top: var(--spacing-card-sm);

        text-align: left;

        .stat svg {
          margin-left: 0;
        }

        .buttons {
          flex-direction: row;
        }

        .buttons button,
        a {
          margin-left: unset;
          margin-right: unset;
        }
      }
    }

    .left-categories {
      display: flex;
      margin: 0 0 0.75rem 0.75rem;
      width: 7rem;
    }

    .right-categories {
      display: none;
    }
  }
}
</style>