feat(guide): add next and previous page buttons (#8777)

This commit is contained in:
Suneet Tipirneni
2022-11-25 15:49:36 -05:00
committed by GitHub
parent 56d086022f
commit 650f4ddfb2
2 changed files with 59 additions and 3 deletions

View File

@@ -0,0 +1,13 @@
export function PageButton({ url, title, direction }: { direction: 'next' | 'prev'; title: string; url: string }) {
return (
<a
className="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-600 dark:hover:bg-dark-500 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple flex transform-gpu cursor-pointer select-none appearance-none flex-row flex-col place-items-center gap-2 rounded py-3 px-4 leading-none no-underline outline-0 focus:ring active:translate-y-px"
href={url}
>
<h3 className="text-md font-semibold">{title}</h3>
<p className={`${direction === 'next' ? 'ml-auto' : 'mr-auto'} text-sm text-gray-600 dark:text-gray-400`}>
{direction === 'next' ? 'Next Page' : 'Previous Page'}
</p>
</a>
);
}