38 lines
909 B
Svelte
38 lines
909 B
Svelte
<script lang="ts">
|
|
import type { Category } from "$lib/models/category";
|
|
import { getFileURL } from "$lib/util/file_util";
|
|
import { _ } from "svelte-i18n";
|
|
interface Props {
|
|
category: Category;
|
|
}
|
|
|
|
let { category }: Props = $props();
|
|
</script>
|
|
|
|
<div
|
|
class="category-card relative rounded-2xl shadow-md max-h-48 aspect-video overflow-hidden cursor-pointer"
|
|
>
|
|
<img
|
|
class="w-full h-full"
|
|
src={getFileURL(category, category.img)}
|
|
alt=""
|
|
/>
|
|
<div
|
|
class="absolute bottom-0 w-full h-1/2 bg-gradient-to-b from-transparent to-black opacity-50"
|
|
></div>
|
|
<h5 class="absolute text-white font-bold bottom-4 left-4 text-xl">
|
|
{$_(category.name)}
|
|
</h5>
|
|
</div>
|
|
|
|
<style>
|
|
.category-card img {
|
|
object-fit: cover;
|
|
transition: 0.25s ease;
|
|
}
|
|
|
|
.category-card:hover img {
|
|
scale: 1.075;
|
|
}
|
|
</style>
|