40 lines
1.3 KiB
TypeScript
40 lines
1.3 KiB
TypeScript
export function PresentFooterNav({
|
|
title,
|
|
onPrev,
|
|
onNext,
|
|
prevDisabled,
|
|
nextDisabled,
|
|
}: {
|
|
title: string;
|
|
onPrev: () => void;
|
|
onNext: () => void;
|
|
prevDisabled: boolean;
|
|
nextDisabled: boolean;
|
|
}) {
|
|
return (
|
|
<footer className="fixed inset-x-0 bottom-0 z-40 border-t border-[#e5e5ea] bg-white/95 shadow-[0_-4px_12px_rgba(0,0,0,0.06)] backdrop-blur-md">
|
|
<div className="mx-auto flex h-16 max-w-5xl items-center justify-between gap-4 px-4 sm:px-6">
|
|
<button
|
|
type="button"
|
|
disabled={prevDisabled}
|
|
onClick={onPrev}
|
|
className="min-w-[88px] rounded-lg border border-[#e5e5ea] bg-white px-4 py-2 text-sm font-semibold text-[#24282f] transition hover:bg-[#f2f2f7] disabled:cursor-not-allowed disabled:opacity-40"
|
|
>
|
|
◀ Prev
|
|
</button>
|
|
<h2 className="min-w-0 flex-1 truncate text-center text-base font-semibold text-[#24282f] sm:text-lg">
|
|
{title}
|
|
</h2>
|
|
<button
|
|
type="button"
|
|
disabled={nextDisabled}
|
|
onClick={onNext}
|
|
className="min-w-[88px] rounded-lg border border-[#e5e5ea] bg-white px-4 py-2 text-sm font-semibold text-[#24282f] transition hover:bg-[#f2f2f7] disabled:cursor-not-allowed disabled:opacity-40"
|
|
>
|
|
Next ▶
|
|
</button>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|