mirror of https://github.com/gabehf/mnrva.dev.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
50 lines
1.2 KiB
50 lines
1.2 KiB
---
|
|
import formatDate from "@/utils/formatDate";
|
|
|
|
type Props = {
|
|
title: string;
|
|
publishedAt: Date;
|
|
description: string;
|
|
slug: string;
|
|
};
|
|
|
|
const { title, publishedAt, description, slug } = Astro.props;
|
|
---
|
|
|
|
<a
|
|
class="group flex max-w-sm cursor-pointer flex-col gap-2 rounded-md border border-neutral-700 p-4 transition-all duration-300 hover:-translate-y-2 hover:border-neutral-400"
|
|
href={`/posts/${slug}`}
|
|
>
|
|
<div
|
|
class="flex w-full flex-col justify-between gap-2 md:flex-row md:items-center"
|
|
>
|
|
<p class="text-neutral-100">{title}</p>
|
|
<div class="flex flex-row items-center gap-4">
|
|
<p>{formatDate(publishedAt)}</p>
|
|
|
|
<svg
|
|
width="18"
|
|
height="18"
|
|
viewBox="0 0 18 18"
|
|
fill="none"
|
|
class="transition-all duration-300 group-hover:translate-x-1"
|
|
>
|
|
<path
|
|
d="M5.25 12.75L12.75 5.25"
|
|
stroke="#999999"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"></path>
|
|
<path
|
|
d="M5.25 5.25H12.75V12.75"
|
|
stroke="#999999"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
|
|
<p class="truncate">
|
|
{description}
|
|
</p>
|
|
</a>
|