firq-dev-website/src/components/cards/servantCard.astro

---
import { Image } from 'astro:assets';
import type { GlobImage } from '../../types/generic'
import { plsLoadImage } from '../../utils/tools'

export interface Props {
  name: string
  level: string
  skills: string
  np: string
  servantImageFile: string
  bondceImageFile: string
  ml: string
  bond10: boolean
  index: number
}

const { bond10, ml, bondceImageFile, servantImageFile, np, skills, level, name, index } = Astro.props
const servantImagePath = `/src/assets/servant/${servantImageFile}`
const bondceImagePath = `/src/assets/ce/bond-ce/${bondceImageFile}`
const images_servants = import.meta.glob<GlobImage>('/src/assets/servant/*.{png,webp}')
const images_bond_ces = import.meta.glob<GlobImage>('/src/assets/ce/bond-ce/*.{png,webp}')
const loadedServantImage = plsLoadImage(images_servants, servantImagePath)
const loadedBondCEImage = plsLoadImage(images_bond_ces, bondceImagePath)

let bondce_css: string = 'bond-ce'

if (bond10 === false) {
  bondce_css += ' unobtained'
}

let loading: "eager" | "lazy" = index <= 5 ? "eager" : "lazy";
---

<article>
  <Image src={loadedServantImage} width={128} height={128} alt={name} quality={100} loading={loading}/>
  <h2 class="subtext">
    Level {level}<br />
    {skills}<br />
    NP {np}
  </h2>
  <div class="expand-on-hover">
    <Image src={loadedBondCEImage} alt="" class={bondce_css}/>
    <h2 class="subtext">Mana Loading: {ml === 'Not Unlocked' && <br />}{ml}</h2>
  </div>
</article>

<style>
  .heading {
    display: flex;
    height: 4rem;
    width: 100%;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    max-width: 200px;
    padding-bottom: 0.3rem;
    font-weight: bold;
  }

  .servants-container {
    row-gap: 1em;
    column-gap: 1em;
    justify-content: center;
    align-self: center;
  }

  article:hover {
    transform: scale(1);
    border-color: var(--c-darkpurple);
  }

  article {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: var(--c-darkergray);
    border: 2px var(--c-darkgray) solid;
    padding: 10px;
    width: max(30%, 100px);
    height: auto;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 1.25rem;
  }

  article > img {
    width: 90%;
    height: auto;
    border-radius: 2.5rem;
    margin-top: 0.75rem;
  }
  .subtext {
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin: 5;
    line-height: 20px;
  }

  .expand-on-hover {
    background-color: var(--c-darkergray);
    border: 2px var(--c-darkpurple) solid;
    border-top: 0px;
    z-index: 99;
    transform: scaleY(0);
    transform-origin: top;
    position: absolute;
    top: 92.5%;
    border-radius: 0px 0px 1.25rem 1.25rem;
    width: 100%;
  }

  article:hover .expand-on-hover {
    transform: scaleY(1);
    transition: transform 200ms ease-in-out;
  }

  .bond-ce {
    padding-top: 0.25rem;
    width: auto;
    height: 3rem;
  }

  .unobtained {
    filter: grayscale(1);
  }

  @media (min-width: 512px) {
    article {
      padding: 10px;
      width: auto;
      height: auto;
    }

    article > img {
      width: 128px;
      height: 128px;
    }

    .bond-ce {
      height: 3rem;
    }
  }
</style>