generated from muhtadeetaron/nextjs-template
48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
// app/tabs/layout.tsx
|
|
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ReactNode } from "react";
|
|
import { usePathname } from "next/navigation";
|
|
import clsx from "clsx";
|
|
import { GoHomeFill } from "react-icons/go";
|
|
import { HiViewGrid } from "react-icons/hi";
|
|
import { FaBookmark } from "react-icons/fa";
|
|
import { HiCog6Tooth } from "react-icons/hi2";
|
|
|
|
const tabs = [
|
|
{ name: "Home", href: "/home", component: <GoHomeFill size={30} /> },
|
|
{
|
|
name: "Categories",
|
|
href: "/categories",
|
|
component: <HiViewGrid size={30} />,
|
|
},
|
|
{ name: "Bookmark", href: "/bookmark", component: <FaBookmark size={23} /> },
|
|
{ name: "Settings", href: "/settings", component: <HiCog6Tooth size={30} /> },
|
|
];
|
|
|
|
export default function TabsLayout({ children }: { children: ReactNode }) {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<div className="min-h-screen flex flex-col">
|
|
<main className="flex-1">{children}</main>
|
|
|
|
<nav className="h-[70px] w-full flex justify-around items-center border-t border-t-neutral-400 p-4 rounded-t-4xl bg-white fixed bottom-0">
|
|
{tabs.map((tab) => (
|
|
<Link
|
|
key={tab.name}
|
|
href={tab.href}
|
|
className={clsx(
|
|
"text-center text-sm font-medium",
|
|
pathname === tab.href ? "text-blue-600" : "text-gray-500"
|
|
)}
|
|
>
|
|
{tab.component}
|
|
</Link>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|