shellphone.app/app/core/layouts/layout/footer.tsx

46 lines
1.3 KiB
TypeScript
Raw Normal View History

import type { ReactNode } from "react";
2021-07-31 17:22:48 +00:00
import { Link, useRouter } from "blitz";
import { IoCall, IoKeypad, IoChatbubbles, IoSettings } from "react-icons/io5";
2021-08-30 21:15:30 +00:00
import clsx from "clsx";
2021-07-18 15:32:45 +00:00
export default function Footer() {
return (
2021-08-30 21:15:30 +00:00
<footer
className="grid grid-cols-4 bg-[#F7F7F7] border-t border-gray-400 border-opacity-25 py-3"
style={{ flex: "0 0 50px" }}
>
<NavLink label="Calls" path="/calls" icon={<IoCall className="w-6 h-6" />} />
<NavLink label="Keypad" path="/keypad" icon={<IoKeypad className="w-6 h-6" />} />
<NavLink label="Messages" path="/messages" icon={<IoChatbubbles className="w-6 h-6" />} />
<NavLink label="Settings" path="/settings" icon={<IoSettings className="w-6 h-6" />} />
2021-07-18 15:32:45 +00:00
</footer>
);
2021-07-18 15:32:45 +00:00
}
type NavLinkProps = {
path: string;
label: string;
2021-08-30 21:15:30 +00:00
icon: ReactNode;
};
2021-07-18 15:32:45 +00:00
2021-08-30 21:15:30 +00:00
function NavLink({ path, label, icon }: NavLinkProps) {
const router = useRouter();
const isActiveRoute = router.pathname.startsWith(path);
2021-07-18 15:32:45 +00:00
return (
<div className="flex flex-col items-center justify-around h-full">
<Link href={path}>
2021-08-30 21:15:30 +00:00
<a
className={clsx("flex flex-col items-center", {
2021-10-15 22:24:28 +00:00
"text-primary-500": isActiveRoute,
2021-08-30 21:15:30 +00:00
"text-[#959595]": !isActiveRoute,
})}
>
2021-07-18 15:32:45 +00:00
{icon}
<span className="text-xs">{label}</span>
</a>
</Link>
</div>
);
2021-07-18 15:32:45 +00:00
}