--- import { Image } from 'astro:assets' import type { GlobImage } from '../../types/generic' import { plsLoadImage } from '../../utils/tools' export interface Props { name: string origin: string imageFile: string link: string } const { link, imageFile, origin, name } = Astro.props const imagePath = `/src/assets/favourites/${imageFile}` const images = import.meta.glob<GlobImage>( '/src/assets/favourites/*.{png,webp}' ) const loadedImage = plsLoadImage(images, imagePath) --- <a href={link} target="_blank" rel="noopener noreferrer" aria-label=`${name} - new window` > <div class="heading">{name}</div> <Image src={loadedImage} alt={name} loading={'eager'}/> <h2 class="subtext"> {origin} </h2> </a> <style> .heading { display: flex; height: 2.5rem; font-size: 24px; color: white; max-width: 200px; padding-bottom: 0.3rem; font-weight: bold; margin: 0px; justify-content: center; align-items: center; } a { border-radius: 1rem; display: flex; flex-wrap: wrap; flex-direction: column; background-color: var(--c-darkergray); padding: 0em 0.5em; width: max(40%, 200px); height: auto; justify-content: center; align-items: center; text-align: center; transition: transform var(--speed) var(--ease); text-decoration: none; border: 2px var(--c-darkgray) solid; &:hover { border: 2px var(--c-darkpurple) solid; } img { width: min(90%, 160px); margin: 0px 0.5rem; height: auto; border-radius: 1rem; } } @media (min-width: 512px) { a { padding: 10px 10px; width: auto; height: auto; img { width: 160px; } } } .subtext { color: white; font-size: 16px; font-weight: 600; margin: 0.5rem; line-height: 20px; } </style>