92 lines
2.8 KiB
Vue
92 lines
2.8 KiB
Vue
<template>
|
|
<router-link
|
|
:to="to"
|
|
class="mbz-card flex flex-col items-center dark:border-gray-700 shadow-md md:flex-col snap-center shrink-0 first:pl-8 w-[18rem] dark:bg-mbz-purple"
|
|
>
|
|
<div class="relative w-full group">
|
|
<img
|
|
v-if="picture"
|
|
class="object-cover h-40 w-full rounded-t-lg"
|
|
:src="picture.url"
|
|
width="350"
|
|
alt=""
|
|
loading="lazy"
|
|
/>
|
|
<div class="absolute top-0 left-0 h-full w-full">
|
|
<div
|
|
class="custom-overlay opacity-0 invisible group-hover:opacity-100 group-hover:visible absolute left-0 h-full w-full transition-opacity"
|
|
/>
|
|
<div
|
|
class="opacity-0 invisible group-hover:opacity-100 group-hover:visible absolute left-0 h-full w-full"
|
|
>
|
|
<p class="absolute text-sm text-white left-1 bottom-1.5 px-1">
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
class="inline h-5 w-5 pr-1"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
stroke-width="2"
|
|
>
|
|
<path
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
<span
|
|
@click="(e) => e.stopPropagation()"
|
|
class="align-bottom"
|
|
v-html="
|
|
$t('Photo by {author} on {source}', {
|
|
author: imageAuthor,
|
|
source: imageSource,
|
|
})
|
|
"
|
|
/>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
class="flex h-full justify-between self-end flex-col p-2 pt-1 md:p-4 md:pt-2 leading-normal w-full"
|
|
>
|
|
<h2
|
|
class="mb-2 text-xl font-bold tracking-tight text-violet-title dark:text-white"
|
|
>
|
|
<slot name="default" />
|
|
</h2>
|
|
</div>
|
|
</router-link>
|
|
</template>
|
|
<script lang="ts" setup>
|
|
import { computed } from "vue";
|
|
import { CategoryPictureLicencing } from "../Categories/constants";
|
|
|
|
const props = defineProps<{
|
|
to: { name: string; query: Record<string, string | undefined> };
|
|
picture?: CategoryPictureLicencing & { url: string };
|
|
}>();
|
|
|
|
const imageAuthor = computed(
|
|
() =>
|
|
`<a target="_blank" class="underline font-medium" href="${props.picture?.author?.url}">${props.picture?.author?.name}</a>`
|
|
);
|
|
const imageSource = computed(
|
|
() =>
|
|
`<a target="_blank" class="underline font-medium" href="${props.picture?.source?.url}">${props.picture?.source?.name}</a>`
|
|
);
|
|
</script>
|
|
<style>
|
|
.custom-overlay {
|
|
background-image: linear-gradient(
|
|
180deg,
|
|
rgba(0, 0, 0, 0) 0%,
|
|
rgba(0, 0, 0, 0) 25%,
|
|
rgba(2, 0, 36, 0.75) 90%,
|
|
rgba(2, 0, 36, 0.85) 100%
|
|
);
|
|
transition: opacity 0.1s ease-in-out, visibility 0.1s ease-in-out;
|
|
}
|
|
</style>
|