79 lines
2.1 KiB
Vue
79 lines
2.1 KiB
Vue
|
<template>
|
||
|
<router-link
|
||
|
:to="{
|
||
|
name: 'SEARCH',
|
||
|
query: {
|
||
|
eventCategory: category.key,
|
||
|
contentType: 'EVENTS',
|
||
|
radius: undefined,
|
||
|
},
|
||
|
}"
|
||
|
class="max-w-xs rounded-lg overflow-hidden bg-center bg-no-repeat bg-cover shadow-lg relative group"
|
||
|
>
|
||
|
<picture
|
||
|
v-if="categoriesWithPictures.includes(category.key)"
|
||
|
class="brightness-50"
|
||
|
>
|
||
|
<source
|
||
|
:srcset="`/img/categories/${category.key.toLowerCase()}.jpg 2x, /img/categories/${category.key.toLowerCase()}.jpg`"
|
||
|
media="(min-width: 1000px)"
|
||
|
/>
|
||
|
<source
|
||
|
:srcset="`/img/categories/${category.key.toLowerCase()}.jpg 2x, /img/categories/${category.key.toLowerCase()}-small.jpg`"
|
||
|
media="(min-width: 300px)"
|
||
|
/>
|
||
|
<img
|
||
|
class="w-full h-36 w-36 md:h-52 md:w-52 object-cover"
|
||
|
:src="`/img/categories/${category.key.toLowerCase()}.jpg`"
|
||
|
:srcset="`/img/categories/${category.key.toLowerCase()}-small.jpg `"
|
||
|
alt=""
|
||
|
/>
|
||
|
</picture>
|
||
|
<p
|
||
|
v-else
|
||
|
class="h-36 w-36 md:h-52 md:w-52 brightness-75"
|
||
|
:class="randomGradient()"
|
||
|
/>
|
||
|
<div class="px-3 py-1 absolute left-0 bottom-0">
|
||
|
<h2
|
||
|
class="group-hover:text-slate-200 font-semibold text-white tracking-tight text-xl mb-3"
|
||
|
>
|
||
|
{{ category.label }}
|
||
|
</h2>
|
||
|
</div>
|
||
|
<span
|
||
|
v-if="withDetails"
|
||
|
class="absolute z-10 inline-flex items-center px-3 py-1 text-xs font-semibold text-white bg-black rounded-full right-2 top-2"
|
||
|
>
|
||
|
{{
|
||
|
t(
|
||
|
"{count} events",
|
||
|
{
|
||
|
count: category.number.toString(),
|
||
|
},
|
||
|
category.number
|
||
|
)
|
||
|
}}
|
||
|
</span>
|
||
|
</router-link>
|
||
|
</template>
|
||
|
<script lang="ts" setup>
|
||
|
import { categoriesWithPictures } from "./constants";
|
||
|
import { randomGradient } from "../../utils/graphics";
|
||
|
import { CategoryStatsModel } from "../../types/stats.model";
|
||
|
|
||
|
import { useI18n } from "vue-i18n";
|
||
|
|
||
|
withDefaults(
|
||
|
defineProps<{
|
||
|
category: CategoryStatsModel;
|
||
|
withDetails?: boolean;
|
||
|
}>(),
|
||
|
{
|
||
|
withDetails: false,
|
||
|
}
|
||
|
);
|
||
|
|
||
|
const { t } = useI18n({ useScope: "global" });
|
||
|
</script>
|