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

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

export interface Props {
  date: string
  title: string
  link: string
  targetImageFile: string
  user?: string
  servantImageFile?: string
  turns?: string
}

const { turns, targetImageFile, user, date, servantImageFile, link, title } =
  Astro.props

const options_date: Intl.DateTimeFormatOptions = {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
}

const targetImagePath = `/src/assets/ta_icons/${targetImageFile}`
const servantImagePath = `/src/assets/ta_icons/ta_servants/${servantImageFile}`

const formatted_date = new Date(date).toLocaleDateString('de-DE', options_date)
const target_images = import.meta.glob<GlobImage>(
  '/src/assets/ta_icons/*.{png,webp}'
)
const servant_images = import.meta.glob<GlobImage>(
  '/src/assets/ta_icons/ta_servants/*.{png,webp}'
)

const loadedServantImage = plsLoadImage(servant_images, servantImagePath)
const loadedTargetImage = plsLoadImage(target_images, targetImagePath)

const hasuser = user !== undefined ? 'display: flex' : 'display: none'
---

<a href={link} target="_blank" rel="noopener noreferrer" aria-label={title}>
  <div class="imagecontainer">
    <Image src={loadedTargetImage} alt={title} />
    <div class="title">
      <h2>{title}</h2>
    </div>
  </div>
  <p>
    <span style={hasuser}>By {user}<br />•</span>
    {formatted_date}
  </p>
  <div class="expand-on-hover">
    <Image src={loadedServantImage} alt="" />
    <h2>{turns}</h2>
  </div>
</a>

<style>
  * {
    transition: all var(--a-time-default) var(--a-animation-1);
  }
  a {
    text-decoration: none;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: var(--c-primary-background);
    border: 2px var(--c-primary-background) solid;
    padding: 10px;
    text-align: center;
    width: max(30%, 100px);
    height: auto;
    border-radius: 1.25rem;
    justify-content: center;
    align-items: center;
    z-index: 1;
  }

  a:hover {
    transform: scale(1);
    border-color: var(--c-accent-1);
    z-index: 10;
  }

  .imagecontainer {
    display: flex;
    width: 90%;
    height: auto;
    position: relative;
  }
  .imagecontainer > img {
    width: 100%;
    height: auto;
    border-radius: 1.25rem;
  }

  a:hover .title {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: var(--c-primary-background);
    width: 100%;
    height: 100%;
    opacity: 90%;
    box-shadow: 0px 0px 0px 1px var(--c-primary-background);
    border-radius: 1.25rem;
  }

  a:hover .title h2 {
    margin: 4px;
    display: inline-flex;
    font-weight: 500;
    color: var(--c-primary-text);
    font-size: 1rem;
    line-height: 150%;
  }

  a .title {
    display: none;
  }

  p {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    align-items: center;
    line-height: 100%;
    text-decoration: none;
    color: var(--c-primary-text);
    font-size: 1rem;
    font-weight: 400;
    margin: 0.5rem 0px 0.625rem 0px;
  }

  .expand-on-hover {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: top;
    justify-content: space-evenly;
    background-color: var(--c-primary-background);
    border: 2px var(--c-primary-background) solid;
    border-top: 0px;
    z-index: 99;
    transform: scaleY(0);
    transform-origin: top;
    position: absolute;
    top: 87.5%;
    padding-top: 0.5rem;
    margin-top: 0.2rem;
    color: var(--c-primary-text);
    border-radius: 0px 0px 1.25rem 1.25rem;
    width: 100%;
  }

  .expand-on-hover img {
    width: 2.5rem;
    height: auto;
    margin-bottom: 0.5rem;
    border-radius: 0.5rem;
  }

  .expand-on-hover h2 {
    margin: 0.5rem;
  }

  a:hover .expand-on-hover {
    transform: scaleY(1);
    transition: all var(--a-time-default) var(--a-animation-1);
    background-color: var(--c-primary-background);
    border-color: var(--c-accent-1);
  }

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

    a > .imagecontainer {
      width: 112px;
      height: 112px;
    }
  }
</style>