50 lines
1.6 KiB
TypeScript
50 lines
1.6 KiB
TypeScript
'use client';
|
|
import { useScopedI18n } from '@/locales/client';
|
|
import { Button } from '@/components/ui/button';
|
|
|
|
interface NavigationProps {
|
|
currentPage: number;
|
|
totalPages: number;
|
|
goToPage: (page: number) => void;
|
|
onSubmit: () => void;
|
|
isLastPage: boolean;
|
|
}
|
|
|
|
export function Navigation({
|
|
currentPage,
|
|
totalPages,
|
|
goToPage,
|
|
onSubmit,
|
|
isLastPage,
|
|
}: NavigationProps) {
|
|
const t = useScopedI18n('component.questionnaire.test.public.navigation');
|
|
return (
|
|
<div className="fixed inset-x-0 bottom-0 z-30 flex items-center justify-between gap-3 border-t bg-background/95 px-4 pt-3 pb-[calc(0.75rem+env(safe-area-inset-bottom))] shadow-[0_-4px_16px_rgba(0,0,0,0.06)] backdrop-blur lg:static lg:mt-8 lg:border-0 lg:bg-transparent lg:p-0 lg:shadow-none lg:backdrop-blur-none">
|
|
<Button
|
|
variant="outline"
|
|
className="h-11 min-w-24 text-base lg:h-9 lg:min-w-0 lg:text-sm"
|
|
onClick={() => goToPage(currentPage - 1)}
|
|
disabled={currentPage === 1}
|
|
>
|
|
{t('previousPage')}
|
|
</Button>
|
|
|
|
<span className="shrink-0 text-xs text-gray-500 sm:text-sm">
|
|
{t('pageInfo', { currentPage, totalPages })}
|
|
</span>
|
|
|
|
{isLastPage ? (
|
|
<Button className="h-11 min-w-24 text-base lg:h-9 lg:min-w-0 lg:text-sm" onClick={onSubmit}>{t('submit')}</Button>
|
|
) : (
|
|
<Button
|
|
className="h-11 min-w-24 text-base lg:h-9 lg:min-w-0 lg:text-sm"
|
|
onClick={() => goToPage(currentPage + 1)}
|
|
disabled={currentPage === totalPages}
|
|
>
|
|
{t('nextPage')}
|
|
</Button>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|