leim-maps/src/components/maps/MarkerContent.astro

---
import type { MapMarker } from '@/types/Leaflet';
import { normalizeString } from '@/utils/Strings';
import { getLangFromUrl } from '@/i18n/utils';
import { t } from '@/i18n/store';

import CopyText from '@/components/global/CopyText.astro';

interface Props {
    marker: MapMarker
}

const { marker: m } = Astro.props as Props;

const lang = getLangFromUrl(Astro.url);

const byText = t('common.by', lang)
const seeMapText = t('maps.go-to-map', lang)
---

<div class="tooltip-content">
    {m.cover && m.coverAuthor && m.coverLink && (
        <figure class={m.coverPortrait ? 'portrait' : 'landscape'}>
            <img src={`/images/cover/${m.cover}`} alt={m.title} width={m.coverPortrait ? 210 : 420} />
            <figcaption>
                <span class="author">
                    <span>{byText}</span>
                    <cite>
                        <a href={m.coverLink} target="_blank">{m.coverAuthor}</a>
                    </cite>
                </span>
            </figcaption>
        </figure>
    )}
    {m.link ? (
        <a href={m.link} target="_blank" class="title">{m.title}</a>
    ) : (
        <strong class="title">{m.title}</strong>
    )}
    {m.description && <p set:html={m.description} />}
    
    <div class="tooltip-footer">
        {m.mapId && (
            <div>
                <a href={m.mapId} class="map-link">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><line x1="80" y1="112" x2="144" y2="112" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><circle cx="112" cy="112" r="80" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="168.57" y1="168.57" x2="224" y2="224" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/><line x1="112" y1="80" x2="112" y2="144" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="16"/></svg>
    
                    <span>
                        { seeMapText }
                    </span>
                </a>
            </div>
        )}
    
        <div>
            <CopyText text={`${Astro.url}?p=${normalizeString(m.title)}`} />
        </div>
    </div>
</div>

<style lang="scss">
    figure {
        position: relative;
        margin-inline: -1.1rem;
        margin-top: -1.1rem;
        margin-bottom: .5rem;

        &.landscape {
            aspect-ratio: 16 / 9;
            min-width: 20rem;
        }

        &.portrait {
            aspect-ratio: 15 / 16;
            min-width: 10rem;
        }

        &::before {
            content: '';
            display: block;
            pointer-events: none;
            user-select: none;
            position: absolute;
            inset: 0;
            z-index: 10;
            // Make a linear gradient from top to bottom, from transparent to black
            background: linear-gradient(to bottom, transparent 70%, var(--black) 100%);
        }

        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
        }

        figcaption .author {
            position: absolute;
            font-size: 85%;
            font-style: italic;
            font-weight: 600;
            bottom: .5rem;
            right: 1rem;
            color: var(--white);
            z-index: 20;
            opacity: .6;
            transition-property: opacity;
            transition-duration: .2s;
            transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);

            a {
                padding-right: 0;
                color: var(--white);
                text-decoration: underline;
                text-underline-offset: .15rem;

                &:hover {
                    color: var(--blue-500);
                }

                &::after {
                    display: none;
                }
            }
        }

        &:hover {
            figcaption .author {
                opacity: 1;
            }
        }
    }

    .title {
        display: block;
        font-weight: 600;
    }

    strong.title {
        color: var(--green-500);
    }

    a.title,
    a.map-link {
        text-underline-offset: 2px;
        text-decoration: underline;

        &:hover,
        &:focus-visible {
            text-decoration: none;
            color: var(--green-500);
        }
    }

    .map-link {
        display: inline-flex;
        align-items: center;
        gap: .5ch;

        svg {
            width: 1rem;
            height: 1rem;
        }
    }

    .tooltip-content > * + * {
        margin: 0;
        margin-top: .66em;
    }

    .tooltip-footer {
        display: grid;
        gap: .15em;
        font-size: .95em;
    }
</style>