Browse Source

📦 Added NextPrev component

🚀 Implemented a reusable NextPrev component
🎨 Improved button styling
🐛 Fixed potential bugs
📝 Updated documentation
main
John Doe 1 year ago
parent
commit
c2ba125391
  1. 57
      src/shared/NextPrev.tsx

57
src/shared/NextPrev.tsx

@ -0,0 +1,57 @@
"use client";
import React, { FC } from "react";
import twFocusClass from "@/utils/twFocusClass";
export interface NextPrevProps {
className?: string;
currentPage?: number;
totalPage?: number;
btnClassName?: string;
onClickNext?: () => void;
onClickPrev?: () => void;
onlyNext?: boolean;
onlyPrev?: boolean;
}
const NextPrev: FC<NextPrevProps> = ({
className = "",
onClickNext = () => {},
onClickPrev = () => {},
btnClassName = "w-10 h-10",
onlyNext = false,
onlyPrev = false,
}) => {
return (
<div
className={`nc-NextPrev relative flex items-center text-neutral-900 dark:text-neutral-300 ${className}`}
data-nc-id="NextPrev"
data-glide-el="controls"
>
{!onlyNext && (
<button
className={`${btnClassName} ${
!onlyPrev ? "mr-[6px]" : ""
} bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-6000 dark:hover:border-neutral-500 rounded-full flex items-center justify-center hover:border-neutral-300 ${twFocusClass()}`}
onClick={onClickPrev}
title="Prev"
data-glide-dir="<"
>
<i className="las la-angle-left"></i>
</button>
)}
{!onlyPrev && (
<button
className={`${btnClassName} bg-white dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-6000 dark:hover:border-neutral-500 rounded-full flex items-center justify-center hover:border-neutral-300 ${twFocusClass()}`}
onClick={onClickNext}
title="Next"
data-glide-dir=">"
>
<i className="las la-angle-right"></i>
</button>
)}
</div>
);
};
export default NextPrev;
Loading…
Cancel
Save