111 lines
3.7 KiB
TypeScript
111 lines
3.7 KiB
TypeScript
"use client";
|
||
|
||
import Link from "next/link";
|
||
import { useEffect, useState } from "react";
|
||
import toast from "react-hot-toast";
|
||
import BoldIcon from "@/components/ui/BoldIcon";
|
||
import { cn } from "@/lib/utils";
|
||
|
||
const tabs = [
|
||
{ href: "/", icon: "home-2", label: "خانه" },
|
||
{ href: "/academy", icon: "teacher", label: "آموزشگاه" },
|
||
{ href: "/new-post", icon: "add-square", label: "پست ها" },
|
||
{ href: "/billboards", icon: "flash-circle", label: "بیلبورد" },
|
||
{ href: "/settings", icon: "setting", label: "تنظیمات" },
|
||
] as const;
|
||
|
||
type TabNavigationProps = {
|
||
currentPage: string;
|
||
};
|
||
|
||
export default function TabNavigation({ currentPage }: TabNavigationProps) {
|
||
const [createTab, setCreateTab] = useState("/new-post");
|
||
const [userTypeS, setUserTypeS] = useState<string | null>(null);
|
||
const [mounted, setMounted] = useState(false);
|
||
const [isDark, setIsDark] = useState(false);
|
||
|
||
useEffect(() => {
|
||
setMounted(true);
|
||
if (typeof window !== "undefined") {
|
||
const userType = localStorage.getItem("usertype");
|
||
setUserTypeS(userType);
|
||
setCreateTab(
|
||
userType === "user"
|
||
? "/new-post"
|
||
: userType === "employer"
|
||
? "/new-project"
|
||
: "/new-post"
|
||
);
|
||
}
|
||
}, []);
|
||
|
||
useEffect(() => {
|
||
if (typeof window === "undefined") return;
|
||
const checkTheme = () => {
|
||
const theme = localStorage.getItem("theme");
|
||
const isDarkMode =
|
||
theme === "dark" ||
|
||
(theme === "system" &&
|
||
window.matchMedia("(prefers-color-scheme: dark)").matches);
|
||
setIsDark(isDarkMode);
|
||
};
|
||
checkTheme();
|
||
window.addEventListener("storage", checkTheme);
|
||
return () => window.removeEventListener("storage", checkTheme);
|
||
}, []);
|
||
|
||
if (!mounted) return null;
|
||
|
||
return (
|
||
<nav className="fixed bottom-2 left-1/2 z-50 w-full max-w-xl -translate-x-1/2 px-4 pb-2">
|
||
<div className="glass-panel gentle-transition flex justify-evenly rounded-full border border-white/40 p-2.5 shadow-lg dark:border-white/10">
|
||
{tabs.map((tab, index) => {
|
||
const href = index === 2 ? createTab : tab.href;
|
||
const isActive =
|
||
currentPage === href ||
|
||
(href === "/settings" && currentPage.startsWith("/settings"));
|
||
|
||
return (
|
||
<Link
|
||
key={tab.href}
|
||
href={href}
|
||
className={cn(
|
||
"gentle-transition flex flex-col items-center gap-0.5 rounded-2xl px-2 py-1",
|
||
"hover:bg-black/5 active:scale-95 dark:hover:bg-white/10",
|
||
isActive && "tab-active-glass scale-105"
|
||
)}
|
||
onClick={(e) => {
|
||
if (index === 2 && !userTypeS) {
|
||
e.preventDefault();
|
||
toast.error("لطفا ابتدا در سایت وارد شوید یا ثبت نام کنید.");
|
||
}
|
||
}}
|
||
>
|
||
<BoldIcon
|
||
name={tab.icon}
|
||
size={28}
|
||
tinted
|
||
className={cn(
|
||
isActive
|
||
? "text-[#ff107d]"
|
||
: isDark
|
||
? "text-zinc-400"
|
||
: "text-zinc-600"
|
||
)}
|
||
/>
|
||
<span
|
||
className={cn(
|
||
"text-[10px] font-semibold gentle-transition",
|
||
isActive ? "text-pink-500" : isDark ? "text-zinc-300" : "text-zinc-600"
|
||
)}
|
||
>
|
||
{tab.label}
|
||
</span>
|
||
</Link>
|
||
);
|
||
})}
|
||
</div>
|
||
</nav>
|
||
);
|
||
}
|