59 lines
2.4 KiB
TypeScript
59 lines
2.4 KiB
TypeScript
|
|
import type { CollectionEntry } from "astro:content";
|
|
import { formatDate } from "@/lib/utils";
|
|
import { Icon } from '@iconify-icon/solid';
|
|
|
|
type Props = {
|
|
entry: CollectionEntry<"blog"> | CollectionEntry<"projects">;
|
|
pill?: string;
|
|
};
|
|
|
|
export default function ArrowCard({ entry, pill }: Props) {
|
|
return (
|
|
<a
|
|
href={`/${entry.collection}/${entry.id}/`}
|
|
class="group p-4 gap-3 flex items-center border rounded-lg hover:bg-black/5 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out"
|
|
>
|
|
<div class="w-full group-hover:text-black group-hover:dark:text-white blend">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
{pill != undefined && (
|
|
<div class="text-sm capitalize px-2 py-0.5 rounded-full border border-black/15 dark:border-white/25">
|
|
{pill}
|
|
</div>
|
|
)}
|
|
<div class="text-sm font-departure uppercase">
|
|
{formatDate(entry.data.date)}
|
|
</div>
|
|
</div>
|
|
<div class="font-semibold mt-3 text-black dark:text-white">
|
|
{entry.data.title}
|
|
</div>
|
|
|
|
<div class="text-sm line-clamp-2">{entry.data.summary}</div>
|
|
<ul class="flex flex-wrap mt-2 gap-1">
|
|
{entry.data.tags.map(
|
|
(tag) => (
|
|
<li class="text-xs font-departure uppercase py-0.5 px-1 rounded bg-black/5 dark:bg-white/20 text-black/75 dark:text-white/75">
|
|
{tag}
|
|
</li>
|
|
)
|
|
)}
|
|
</ul>
|
|
</div>
|
|
<div class="relative overflow-hidden w-4 h-4">
|
|
<Icon
|
|
icon="pixelarticons:arrow-right"
|
|
class="absolute right-0 inset-y-0 text-lg origin-left
|
|
scale-x-0 group-hover:scale-x-100
|
|
transition-all duration-300 ease-in-out"
|
|
/>
|
|
<Icon
|
|
icon="pixelarticons:chevron-right"
|
|
class="absolute right-0 inset-y-0 text-lg
|
|
group-hover:translate-x-4
|
|
transition-all duration-300 ease-in-out"
|
|
/>
|
|
</div>
|
|
</a>
|
|
);
|
|
} |