65 lines
1.9 KiB
Text
65 lines
1.9 KiB
Text
---
|
|
const { prevPost, nextPost } = Astro.props
|
|
---
|
|
|
|
<div class="grid grid-cols-2 gap-1.5 sm:gap-3">
|
|
{
|
|
prevPost?.slug ? (
|
|
<a
|
|
href={`/blog/${prevPost?.slug}`}
|
|
class="group relative flex flex-nowrap rounded-lg border px-4 py-3 pl-10 no-underline transition-colors duration-300 ease-in-out"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
class="absolute left-2 top-1/2 size-5 -translate-y-1/2 fill-none stroke-current stroke-2"
|
|
>
|
|
<line
|
|
x1="5"
|
|
y1="12"
|
|
x2="19"
|
|
y2="12"
|
|
class="translate-x-3 scale-x-0 transition-transform duration-300 ease-in-out"
|
|
/>
|
|
<polyline
|
|
points="12 5 5 12 12 19"
|
|
class="translate-x-1 transition-transform duration-300 ease-in-out"
|
|
/>
|
|
</svg>
|
|
<div class="flex items-center text-sm">{prevPost?.data.title}</div>
|
|
</a>
|
|
) : (
|
|
<div class="invisible" />
|
|
)
|
|
}
|
|
|
|
{
|
|
nextPost?.slug ? (
|
|
<a
|
|
href={`/blog/${nextPost?.slug}`}
|
|
class="group relative flex flex-grow flex-row-reverse flex-nowrap rounded-lg border px-4 py-4 pr-10 no-underline transition-colors duration-300 ease-in-out"
|
|
>
|
|
<svg
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
viewBox="0 0 24 24"
|
|
class="absolute right-2 top-1/2 size-5 -translate-y-1/2 fill-none stroke-current stroke-2"
|
|
>
|
|
<line
|
|
x1="5"
|
|
y1="12"
|
|
x2="19"
|
|
y2="12"
|
|
class="translate-x-3 scale-x-0 transition-transform duration-300 ease-in-out"
|
|
/>
|
|
<polyline
|
|
points="12 5 19 12 12 19"
|
|
class="-translate-x-1 transition-transform duration-300 ease-in-out"
|
|
/>
|
|
</svg>
|
|
<div class="flex items-center text-sm">{nextPost?.data.title}</div>
|
|
</a>
|
|
) : (
|
|
<div class="invisible" />
|
|
)
|
|
}
|
|
</div>
|