Initial commit - modstagram-next
This commit is contained in:
root
155
src/components/TabNavigation.tsx
Normal file
155
src/components/TabNavigation.tsx
Normal file
@@ -0,0 +1,155 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import toast from "react-hot-toast";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
href: "/",
|
||||
icon: (color: string) => (
|
||||
<svg width="28" height="28" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path
|
||||
d="M27.5 13.125C27.5 11.6125 26.4875 9.67496 25.25 8.81246L17.525 3.39996C15.775 2.17496 12.9625 2.23746 11.275 3.54996L4.5375 8.79996C3.4125 9.67496 2.5 11.5375 2.5 12.95V22.2125C2.5 25.1125 4.8625 27.4875 7.7625 27.4875H22.2375C25.1375 27.4875 27.5 25.1125 27.5 22.225V18.35"
|
||||
stroke={color}
|
||||
strokeWidth="1.5"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
),
|
||||
label: "خانه",
|
||||
},
|
||||
{
|
||||
href: "/academy",
|
||||
icon: (color: string) => (
|
||||
<svg width="28" height="28" viewBox="0 0 24 24" fill="none" stroke="currentColor" xmlns="http://www.w3.org/2000/svg">
|
||||
<path stroke={color} d="M5.99953 5.17031L4.02953 6.46031C2.09953 7.72031 2.09953 10.5403 4.02953 11.8003L10.0495 15.7303C11.1295 16.4403 12.9095 16.4403 13.9895 15.7303L19.9795 11.8003C21.8995 10.5403 21.8995 7.73031 19.9795 6.47031L13.9895 2.54031C12.9095 1.83031 11.1295 1.83031 10.0495 2.54031" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path stroke={color} d="M5.63012 13.0801L5.62012 17.7701C5.62012 19.0401 6.60012 20.4001 7.80012 20.8001L10.9901 21.8601C11.5401 22.0401 12.4501 22.0401 13.0101 21.8601L16.2001 20.8001C17.4001 20.4001 18.3801 19.0401 18.3801 17.7701V13.1301" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path stroke={color} d="M21.4004 15V9" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
),
|
||||
label: "آموزشگاه",
|
||||
},
|
||||
{
|
||||
href: "/new-post",
|
||||
icon: (color: string) => (
|
||||
<svg width="28" height="28" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18.7375 15H20" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M10 15H14.7625" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M15 20V10" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M2.5 16.3V18.75C2.5 25 5 27.5 11.25 27.5H18.75C25 27.5 27.5 25 27.5 18.75V11.25C27.5 5 25 2.5 18.75 2.5H11.25C5 2.5 2.5 5 2.5 11.25" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
),
|
||||
label: "پست ها",
|
||||
},
|
||||
{
|
||||
href: "/billboards",
|
||||
icon: (color: string) => (
|
||||
<svg width="28" height="28" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M10.85 15.9001H13.025V20.9626C13.025 21.7126 13.95 22.0626 14.45 21.5001L19.775 15.4501C20.2375 14.9251 19.8625 14.1001 19.1625 14.1001H16.9875V9.0376C16.9875 8.2876 16.0625 7.9376 15.5625 8.5001L10.2375 14.5501C9.775 15.0751 10.15 15.9001 10.85 15.9001Z" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M5 7.5C3.4375 9.5875 2.5 12.1875 2.5 15C2.5 21.9 8.1 27.5 15 27.5C21.9 27.5 27.5 21.9 27.5 15C27.5 8.1 21.9 2.5 15 2.5C13.2125 2.5 11.5 2.875 9.9625 3.5625" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
),
|
||||
label: "بیلبورد",
|
||||
},
|
||||
{
|
||||
href: "/settings",
|
||||
icon: (color: string) => (
|
||||
<svg width="28" height="28" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M3.75 16.35V18.6C3.75 21.25 3.75 21.25 6.25 22.9375L13.125 26.9125C14.1625 27.5125 15.85 27.5125 16.875 26.9125L23.75 22.9375C26.25 21.25 26.25 21.25 26.25 18.6125V11.3875C26.25 8.74995 26.25 8.74995 23.75 7.06245L16.875 3.08745C15.85 2.48745 14.1625 2.48745 13.125 3.08745L6.25 7.06245C3.75 8.74995 3.75 8.74995 3.75 11.3875" stroke={color} strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" />
|
||||
<path d="M18.75 15C18.75 12.925 17.075 11.25 15 11.25C12.925 11.25 11.25 12.925 11.25 15C11.25 17.075 12.925 18.75 15 18.75C15.5125 18.75 16.0125 18.65 16.4625 18.45" stroke={color} strokeWidth="1.5" strokeMiterlimit="10" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
),
|
||||
label: "تنظیمات",
|
||||
},
|
||||
];
|
||||
|
||||
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;
|
||||
|
||||
const defaultColor = isDark ? "#a1a1aa" : "#52525b";
|
||||
const activeColor = "#ff107d";
|
||||
|
||||
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"));
|
||||
const color = isActive ? activeColor : defaultColor;
|
||||
|
||||
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("لطفا ابتدا در سایت وارد شوید یا ثبت نام کنید.");
|
||||
}
|
||||
}}
|
||||
>
|
||||
{tab.icon(color)}
|
||||
<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>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user