Modrinth/packages/ui/src/components/skin/SkinButton.vue

<script setup lang="ts">
import { ref } from 'vue'

const emit = defineEmits<{
  (e: 'select'): void
  (e: 'edit', event: MouseEvent): void
}>()

const props = withDefaults(
  defineProps<{
    forwardImageSrc?: string
    backwardImageSrc?: string
    selected: boolean
    tooltip?: string
  }>(),
  {
    forwardImageSrc: undefined,
    backwardImageSrc: undefined,
    tooltip: undefined,
  },
)

const imagesLoaded = ref({
  forward: Boolean(props.forwardImageSrc),
  backward: Boolean(props.backwardImageSrc),
})

function onImageLoad(type: 'forward' | 'backward') {
  imagesLoaded.value[type] = true
}
</script>

<template>
  <div
    v-tooltip="tooltip ?? undefined"
    class="group flex relative overflow-hidden rounded-xl border-solid border-2 transition-colors duration-200"
    :class="[selected ? 'border-brand' : 'border-transparent hover:border-inverted']"
  >
    <button
      class="skin-btn-bg absolute inset-0 cursor-pointer p-0 border-none group-hover:brightness-125"
      :class="selected ? 'selected' : ''"
      @click="emit('select')"
    ></button>

    <div
      v-if="!(imagesLoaded.forward && imagesLoaded.backward)"
      class="skeleton-loader w-full h-full"
    >
      <div class="skeleton absolute inset-0 aspect-[5/7]"></div>
    </div>

    <span
      v-show="imagesLoaded.forward && imagesLoaded.backward"
      :class="[
        'skin-button__image-parent pointer-events-none w-full h-full grid [transform-style:preserve-3d] transition-transform duration-500 group-hover:[transform:rotateY(180deg)] place-items-stretch with-shadow',
      ]"
    >
      <img
        alt=""
        :src="forwardImageSrc"
        class="skin-button__image-facing object-contain w-full h-full [backface-visibility:hidden] col-start-1 row-start-1"
        height="504"
        @load="onImageLoad('forward')"
      />
      <img
        alt=""
        :src="backwardImageSrc"
        class="skin-button__image-away object-contain w-full h-full [backface-visibility:hidden] [transform:rotateY(180deg)] col-start-1 row-start-1"
        height="504"
        @load="onImageLoad('backward')"
      />
    </span>

    <span
      v-if="$slots['overlay-buttons']"
      class="pointer-events-none absolute inset-0 flex items-end justify-start p-1 gap-1 translate-y-4 scale-75 opacity-0 transition-all group-hover:opacity-100 group-hover:scale-100 group-hover:translate-y-0 group-hover:translate-x-0"
    >
      <slot name="overlay-buttons" />
    </span>
  </div>
</template>

<style scoped lang="scss">
.skeleton-loader {
  aspect-ratio: 5 / 7;
}

.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-bg) 25%,
    var(--color-raised-bg) 50%,
    var(--color-bg) 75%
  );
  background-size: 200% 100%;
  animation: wave 1500ms infinite linear;
}

@keyframes wave {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skin-btn-bg {
  background: var(--color-gradient-button-bg);
}

.skin-btn-bg.selected {
  background: linear-gradient(
      157.61deg,
      var(--color-brand) -76.68%,
      rgba(27, 217, 106, 0.534) -38.61%,
      rgba(12, 89, 44, 0.6) 100.4%
    ),
    var(--color-bg);
}

.skin-btn-bg.selected:hover,
.group:hover .skin-btn-bg.selected {
  filter: brightness(1.15);
}

.with-shadow img {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}

.skin-button__image-parent img {
  transition: filter 200ms ease-in-out;
}

.group:hover .skin-button__image-parent img {
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.with-shadow img {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.4));
}
</style>