67 lines
1.5 KiB
TypeScript
67 lines
1.5 KiB
TypeScript
'use client';
|
|
|
|
import { useRouter } from 'next/navigation';
|
|
import IconButton from './IconButton';
|
|
import { useEffect, useState, useTransition } from 'react';
|
|
import { cc } from '@/utility/css';
|
|
|
|
export default function IconPathButton({
|
|
icon,
|
|
path,
|
|
prefetch,
|
|
loaderDelay = 250,
|
|
shouldScroll = true,
|
|
shouldReplace,
|
|
}: {
|
|
icon: JSX.Element
|
|
path: string
|
|
prefetch?: boolean
|
|
loaderDelay?: number
|
|
shouldScroll?: boolean
|
|
shouldReplace?: boolean
|
|
}) {
|
|
const router = useRouter();
|
|
|
|
const [isPending, startTransition] = useTransition();
|
|
|
|
const [shouldShowLoader, setShouldShowLoader] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (isPending) {
|
|
const timeout = setTimeout(() => {
|
|
setShouldShowLoader(true);
|
|
}, loaderDelay);
|
|
return () => clearTimeout(timeout);
|
|
} else {
|
|
setShouldShowLoader(false);
|
|
}
|
|
}, [isPending, loaderDelay]);
|
|
|
|
useEffect(() => {
|
|
if (prefetch) {
|
|
router.prefetch(path);
|
|
}
|
|
}, [prefetch, router, path]);
|
|
|
|
return (
|
|
<IconButton
|
|
icon={icon}
|
|
onClick={() => startTransition(() => {
|
|
if (shouldReplace) {
|
|
router.replace(path, { scroll: shouldScroll });
|
|
} else {
|
|
router.push(path, { scroll: shouldScroll });
|
|
}
|
|
})}
|
|
isLoading={shouldShowLoader}
|
|
className={cc(
|
|
'translate-y-[-0.5px]',
|
|
'active:translate-y-[1px]',
|
|
'text-gray-500 active:text-gray-600',
|
|
'dark:text-gray-400 dark:active:text-gray-300',
|
|
)}
|
|
spinnerColor="text"
|
|
/>
|
|
);
|
|
}
|