make the doc footer buttons look better
Took 8 minutes
This commit is contained in:
parent
c93f11b710
commit
a5bdce4ea6
@ -22,27 +22,36 @@ const DocsFooter = ({
|
||||
current < pages.length - 1 ? pages[current + 1] : undefined;
|
||||
|
||||
return (
|
||||
<footer className="xs:mx-5 sm:mx-10 my-5 flex flex-col select-none transition-all transform-gpu">
|
||||
<footer className="xs:mx-5 sm:mx-10 my-2 flex flex-col select-none transition-all transform-gpu">
|
||||
<Separator className="mb-4" />
|
||||
<div className="flex justify-between">
|
||||
{/* Previous */}
|
||||
{previous && (
|
||||
<Link
|
||||
className="flex gap-2 items-center hover:opacity-75 transition-all transform-gpu group"
|
||||
className="flex gap-2 items-end hover:opacity-75 transition-all transform-gpu group"
|
||||
href={`/${previous.slug}` || "#"}
|
||||
draggable={false}
|
||||
>
|
||||
<ChevronLeftIcon className="w-4 h-4 group-hover:-translate-x-0.5 transition-all transform-gpu" />
|
||||
{previous.title}
|
||||
<ChevronLeftIcon className="pb-1 w-4 h-4 group-hover:-translate-x-0.5 transition-all transform-gpu" />
|
||||
<div className="flex flex-col">
|
||||
<h1 className="text-sm opacity-75">Previous</h1>
|
||||
<p>{previous.title}</p>
|
||||
</div>
|
||||
</Link>
|
||||
)}
|
||||
|
||||
{/* Next */}
|
||||
{next && (
|
||||
<Link
|
||||
className="ml-auto flex gap-2 items-center hover:opacity-75 transition-all transform-gpu group"
|
||||
className="ml-auto flex gap-2 items-end hover:opacity-75 transition-all transform-gpu group"
|
||||
href={`/${next.slug}` || "#"}
|
||||
draggable={false}
|
||||
>
|
||||
{next.title}
|
||||
<ChevronRightIcon className="w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
|
||||
<div className="flex flex-col">
|
||||
<h1 className="text-sm opacity-75">Next</h1>
|
||||
<p>{next.title}</p>
|
||||
</div>
|
||||
<ChevronRightIcon className="pb-1 w-4 h-4 group-hover:translate-x-0.5 transition-all transform-gpu" />
|
||||
</Link>
|
||||
)}
|
||||
</div>
|
||||
|
@ -22,7 +22,7 @@ const Sidebar = (): ReactElement => (
|
||||
</div>
|
||||
|
||||
{/* Desktop */}
|
||||
<div className="hidden fixed top-[4.3rem] inset-y-0 min-w-32 w-40 sm:w-52 py-3 xs:flex flex-col justify-between transition-all transform-gpu">
|
||||
<div className="hidden fixed top-[4.3rem] inset-y-0 min-w-32 w-40 sm:w-52 py-5 xs:flex flex-col justify-between transition-all transform-gpu">
|
||||
<SidebarContent />
|
||||
</div>
|
||||
</>
|
||||
|
Loading…
x
Reference in New Issue
Block a user