38 lines
981 B
TypeScript
38 lines
981 B
TypeScript
'use client';
|
|
|
|
import { Button } from '@repo/ui/components/ui/button';
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
|
|
type NavButtonProps = {
|
|
readonly disabled?: boolean;
|
|
readonly href: string;
|
|
readonly icon: React.ReactNode;
|
|
readonly label: string;
|
|
};
|
|
|
|
export function NavButton({ disabled, href, icon, label }: NavButtonProps) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<Button
|
|
asChild
|
|
className="flex flex-col items-center p-6"
|
|
disabled={disabled}
|
|
variant={pathname.endsWith(href) ? 'default' : 'ghost'}
|
|
>
|
|
{disabled ? (
|
|
<div className="flex cursor-not-allowed flex-col items-center opacity-50">
|
|
<span>{icon}</span>
|
|
<span className="mt-1 text-xs">{label}</span>
|
|
</div>
|
|
) : (
|
|
<Link href={href + '?from=bottom-nav'}>
|
|
<span>{icon}</span>
|
|
<span className="mt-1 text-xs">{label}</span>
|
|
</Link>
|
|
)}
|
|
</Button>
|
|
);
|
|
}
|