funkwhale/front/src/components/ui/Card.vue

<script setup lang="ts">
import { useCssModule } from 'vue'
import { FwPill } from '~/components'
import { computed } from 'vue'

import { type RouterLinkProps, RouterLink } from 'vue-router';
import type { Pastel } from '~/types/common-props';
import Layout from '../layout/Layout.vue';
import Spacer from '../layout/Spacer.vue';

interface Props extends Partial<RouterLinkProps> {
  title: string
  category?: true | "h1" | "h2" | "h3" | "h4" | "h5"
  color?: Pastel
  image?: string | { src: string, style?: "withPadding" }
  tags?: string[]
}

const props = defineProps<Props>()

const image = typeof props.image === 'string' ? { src: props.image } : props.image

const isExternalLink = computed(() => {
  return typeof props.to === 'string' && props.to.startsWith('http')
})

const c = useCssModule()
</script>

<style module>
.card {
  /* Override --width with your preferred value */
  --fw-card-width: var(--width, 320px);
  --fw-card-padding: 24px;

  position: relative;

  color: var(--fw-text-color);
  background-color: var(--fw-bg-color);
  box-shadow: 0 3px 12px 2px rgb(0 0 0 / 20%);

  border-radius: var(--fw-border-radius);
  font-size: 1rem;

  width: var(--fw-card-width);

  >.covering {
    position: absolute;
    inset: 0;
  }

  &:has(>.image) {
    text-align: center;
  }

  >.image {
    overflow: hidden;
    border-radius: var(--fw-border-radius) var(--fw-border-radius) 0 0;
    object-fit: cover;
    width: 100%;
    aspect-ratio: 1;

    &.with-padding {
      margin: var(--fw-card-padding) var(--fw-card-padding) calc(var(--fw-card-padding) / 2) var(--fw-card-padding);
      width: calc(100% - 2 * var(--fw-card-padding));
      border-radius: var(--fw-border-radius);
    }
  }

  >.title {
    padding: 0 var(--fw-card-padding);
    line-height: 1.3em;
    font-size: 1.125em;
    font-weight: bold;

    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  &.is-category>.title {
    font-size: 1.75em;
  }

  >.alert {
    padding-left: var(--fw-card-padding);
    padding-right: var(--fw-card-padding);
  }

  >.tags {
    /* Tags have an inherent padding which we offset here: */
    padding: 0 calc(var(--fw-card-padding) - 12px);
  }

  >.content {
    padding: 0 var(--fw-card-padding);
    /* Consider making all line height, vertical paddings, margins and borders,
    a multiple of a global vertical rhythm so that side-by-side lines coincide */
    line-height: 24px;
  }

  >.footer {
    padding: calc(var(--fw-card-padding) - 4px);
    display: flex;
    align-items: center;
    font-size: 0.8125rem;

    >.options-button {
      margin-left: auto;
    }
  }

  >.action {
    display: flex;
    background: color-mix(in oklab, var(--fw-bg-color) 80%, var(--fw-gray-500));
    border-bottom-left-radius: var(--fw-border-radius);
    border-bottom-right-radius: var(--fw-border-radius);

    >*:not(.with-padding) {
      margin: 0;
      flex-grow: 1;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      border: 8px solid transparent;

      &:not(:first-child) {
        border-bottom-left-radius: 0;

      }

      &:not(:last-child) {
        border-bottom-right-radius: 0;
      }
    }
  }
}
</style>

<template>
  <Layout stack :class="{ [c.card]: true, [c['is-category']]: category }" style="--gap:16px">

    <a v-if="props.to && isExternalLink" :class="c.covering" :href="to?.toString()" target="_blank">
      Link to `to`
    </a>

    <RouterLink v-if="props.to && !isExternalLink" :to="props.to" v-slot="{ isActive, href, navigate }">
      <a :href="href" @click="navigate" :class="{ [c.covering]: true, activeClass: isActive }">
        LINK

      </a>
    </RouterLink>

    <!-- Image -->
    <div v-if="$slots.image" :class="c.image">
      <slot name="image" :src="image" />
    </div>
    <img v-else-if="image" :src="image?.src"
      :class="{ [c.image]: true, [c['with-padding']]: image?.style === 'withPadding' }" />
    <Spacer v-else style="--size:12px" />

    <!-- Content -->
    <component :class="c.title" :is="typeof category === 'string' ? category : 'h6'">{{ title }}</component>

    <fw-alert v-if="$slots.alert" :class="c.alert">
      <slot name="alert" />
    </fw-alert>

    <div v-if="tags" :class="c.tags">
      <fw-pill v-for="tag in tags" :key="tag">
        #{{ tag }}
      </fw-pill>
    </div>

    <div v-if="$slots.default" :class="c.content">
      <slot />
    </div>

    <!-- Footer and Action -->
    <div v-if="$slots.footer" :class="c.footer">
      <slot name="footer" />
    </div>

    <div v-if="$slots.action" :class="c.action">
      <slot name="action" />
    </div>
    <Spacer v-else-if="!$slots.footer" style="--size:16px" />

  </Layout>
</template>