45 lines
1.1 KiB
Plaintext
45 lines
1.1 KiB
Plaintext
|
---
|
||
|
|
import type { DocsEntry } from "@/types";
|
||
|
|
import { Image } from "astro:assets";
|
||
|
|
|
||
|
|
interface Props {
|
||
|
|
entry: DocsEntry;
|
||
|
|
}
|
||
|
|
|
||
|
|
const { entry } = Astro.props;
|
||
|
|
const { title, image, imageAlt } = entry.data;
|
||
|
|
---
|
||
|
|
|
||
|
|
<div
|
||
|
|
class="h-full m-2 pl-0 bg-gradient-to-br gradient rounded-lg intersect:animate-fadeUp opacity-0"
|
||
|
|
>
|
||
|
|
<div class="glass h-full rounded-lg">
|
||
|
|
<a
|
||
|
|
class="group hover:opacity-100"
|
||
|
|
href={`/docs/${entry.id.replace("/-index", "")}`}
|
||
|
|
>
|
||
|
|
<div class="relative rounded-lg pb-9/16 overflow-hidden">
|
||
|
|
{
|
||
|
|
image && (
|
||
|
|
<Image
|
||
|
|
class="absolute object-cover w-full h-full group-hover:scale-[105%] transition-all duration-300"
|
||
|
|
src={image}
|
||
|
|
alt={imageAlt}
|
||
|
|
width={1280}
|
||
|
|
height={720}
|
||
|
|
loading="eager"
|
||
|
|
/>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
<div
|
||
|
|
class="glass-t absolute text-center rounded-lg px-2 py-1 top-[50%] left-[50%] -translate-x-[50%] -translate-y-[50%]"
|
||
|
|
>
|
||
|
|
<h4 class="">
|
||
|
|
{title}
|
||
|
|
</h4>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|