94 lines
3.6 KiB
Plaintext
94 lines
3.6 KiB
Plaintext
---
|
|
import type { CollectionEntry } from "astro:content";
|
|
import { Icon } from "astro-icon/components";
|
|
import { formatDate, readingTime } from "@/lib/utils";
|
|
|
|
type Props = {
|
|
entry: CollectionEntry<"projects"> | CollectionEntry<"blog">;
|
|
};
|
|
|
|
const { entry } = Astro.props;
|
|
const { collection, data, body } = entry;
|
|
const { title, summary, date } = data;
|
|
|
|
const demoUrl = collection === "projects" ? data.demoUrl : null;
|
|
const repoUrl = collection === "projects" ? data.repoUrl : null;
|
|
---
|
|
|
|
<div>
|
|
<a
|
|
href={`/${collection}/`}
|
|
class="group w-fit p-1.5 gap-1.5 text-sm flex items-center border rounded 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="relative overflow-hidden w-4 h-4">
|
|
<Icon
|
|
name="pixelarticons:arrow-left"
|
|
class:list="absolute left-0 inset-y-0 text-lg origin-right
|
|
scale-x-0 group-hover:scale-x-100
|
|
transition-all duration-300 ease-in-out"
|
|
/>
|
|
<Icon
|
|
name="pixelarticons:chevron-left"
|
|
class:list="absolute left-0 inset-y-0 text-lg
|
|
group-hover:-translate-x-4
|
|
transition-all duration-300 ease-in-out"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="w-full font-departure group-hover:text-black group-hover:dark:text-white transition-colors duration-300 ease-in-out"
|
|
>
|
|
Back to {collection}
|
|
</div>
|
|
</a>
|
|
<div
|
|
class="flex flex-wrap text-sm font-departure uppercase mt-12 gap-3 opacity-75"
|
|
>
|
|
<div class="flex items-center gap-2">
|
|
<Icon name="pixelarticons:calendar-2" class:list="size-5" />
|
|
{formatDate(date)}
|
|
</div>
|
|
<div class="flex items-center gap-2">
|
|
<Icon name="pixelarticons:book-open" class:list="size-5" />
|
|
{readingTime(body ?? "")}
|
|
</div>
|
|
</div>
|
|
<h1
|
|
class="text-3xl font-semibold font-departure text-black dark:text-white mt-2"
|
|
>
|
|
{title}
|
|
</h1>
|
|
<div class="mt-1">
|
|
{summary}
|
|
</div>
|
|
{
|
|
(demoUrl || repoUrl) && (
|
|
<div class="mt-4 flex flex-wrap gap-2">
|
|
{demoUrl && (
|
|
<a
|
|
href={demoUrl}
|
|
target="_blank"
|
|
class="group flex gap-2 items-center px-3 py-1.5 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend"
|
|
>
|
|
<Icon name="pixelarticons:globe" class:list="size-4" />
|
|
<span class="text-current font-departure group-hover:text-black group-hover:dark:text-white blend">
|
|
See Demo
|
|
</span>
|
|
</a>
|
|
)}
|
|
{repoUrl && (
|
|
<a
|
|
href={repoUrl}
|
|
target="_blank"
|
|
class="group flex gap-2 items-center px-3 py-1.5 truncate rounded text-xs md:text-sm lg:text-base border border-black/25 dark:border-white/25 hover:bg-black/5 hover:dark:bg-white/15 blend"
|
|
>
|
|
<Icon name="pixelarticons:link" class:list="size-4" />
|
|
<span class="text-current font-departure group-hover:text-black group-hover:dark:text-white blend">
|
|
See Repository
|
|
</span>
|
|
</a>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|