45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
"use client";
|
|
|
|
import React from "react";
|
|
import Link from "next/link";
|
|
import { AiOutlineHome, AiOutlineShoppingCart } from "react-icons/ai";
|
|
import { FiUser } from "react-icons/fi";
|
|
import { usePathname } from "next/navigation";
|
|
|
|
export default function TabLayout({ children }) {
|
|
const pathname = usePathname();
|
|
|
|
const getLinkStyle = (path) => {
|
|
const isActive = pathname === path;
|
|
return `flex flex-col items-center ${
|
|
isActive ? "text-yellow-500" : "text-gray-500"
|
|
}`;
|
|
};
|
|
|
|
return (
|
|
<div className="flex flex-col h-screen">
|
|
<div className="flex-1 overflow-auto">{children}</div>
|
|
|
|
<nav
|
|
className="flex items-center justify-around py-2 bg-white border-t border-gray-200"
|
|
style={{ paddingBottom: "env(safe-area-inset-bottom)" }}
|
|
>
|
|
<Link href="/tab" className={getLinkStyle("/tab")}>
|
|
<AiOutlineHome className="w-6 h-6" />
|
|
<span className="text-xs mt-1">首页</span>
|
|
</Link>
|
|
|
|
<Link href="/tab/cart" className={getLinkStyle("/tab/cart")}>
|
|
<AiOutlineShoppingCart className="w-6 h-6" />
|
|
<span className="text-xs mt-1">购物车</span>
|
|
</Link>
|
|
|
|
<Link href="/tab/profile" className={getLinkStyle("/tab/profile")}>
|
|
<FiUser className="w-6 h-6" />
|
|
<span className="text-xs mt-1">我的</span>
|
|
</Link>
|
|
</nav>
|
|
</div>
|
|
);
|
|
}
|