verify
This commit is contained in:
payacom
@@ -1,98 +1,87 @@
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import BoldIcon from "@/components/ui/BoldIcon";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PAGE_SHELL_CLASS } from "@/constants/pageLayout";
|
||||
import { readLocalStorage } from "@/lib/safeStorage";
|
||||
import { useTranslation } from "react-i18next";
|
||||
|
||||
const TAB_KEYS = [
|
||||
{ href: "/", icon: "home-2", labelKey: "tabs.home" },
|
||||
{ href: "/academy", icon: "teacher", labelKey: "tabs.academy" },
|
||||
{ href: "/projects", icon: "briefcase", labelKey: "tabs.projects" },
|
||||
{ href: "/billboards", icon: "flash-circle", labelKey: "tabs.billboards" },
|
||||
{ href: "/settings", icon: "setting", labelKey: "tabs.settings" },
|
||||
] as const;
|
||||
|
||||
type TabNavigationProps = {
|
||||
currentPage: string;
|
||||
};
|
||||
|
||||
export default function TabNavigation({ currentPage }: TabNavigationProps) {
|
||||
const { t } = useTranslation("common");
|
||||
const [mounted, setMounted] = useState(false);
|
||||
const [isDark, setIsDark] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
const checkTheme = () => {
|
||||
const theme = readLocalStorage("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={cn(
|
||||
"fixed bottom-2 left-1/2 z-[55] -translate-x-1/2 pb-2",
|
||||
PAGE_SHELL_CLASS
|
||||
)}
|
||||
>
|
||||
<div className="glass-panel gentle-transition flex justify-evenly rounded-full border border-[#C3C3C3]/60 p-2.5 shadow-lg dark:border-white/10">
|
||||
{TAB_KEYS.map((tab) => {
|
||||
const isActive =
|
||||
currentPage === tab.href ||
|
||||
(tab.href === "/settings" && currentPage.startsWith("/settings")) ||
|
||||
(tab.href === "/projects" &&
|
||||
(currentPage.startsWith("/projects") ||
|
||||
currentPage === "/new-project")) ||
|
||||
(tab.href === "/academy" && currentPage.startsWith("/academy"));
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={tab.href}
|
||||
href={tab.href}
|
||||
className="gentle-transition flex flex-col items-center gap-0.5 px-2 py-1 active:scale-95"
|
||||
>
|
||||
<BoldIcon
|
||||
name={tab.icon}
|
||||
size={28}
|
||||
tinted
|
||||
className={cn(
|
||||
isActive
|
||||
? "text-[#ff107d]"
|
||||
: isDark
|
||||
? "text-white"
|
||||
: "text-zinc-600"
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
"text-[10px] font-semibold gentle-transition",
|
||||
isActive ? "text-pink-500" : isDark ? "text-neutral-100" : "text-zinc-600"
|
||||
)}
|
||||
>
|
||||
{t(tab.labelKey)}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
"use client";
|
||||
|
||||
import Link from "next/link";
|
||||
import { useEffect, useState } from "react";
|
||||
import BoldIcon from "@/components/ui/BoldIcon";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { PAGE_SHELL_CLASS } from "@/constants/pageLayout";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useTheme } from "@/contexts/ThemeContext";
|
||||
import { glassBackdropStyle } from "@/lib/glassBackdrop";
|
||||
|
||||
const TAB_KEYS = [
|
||||
{ href: "/", icon: "home-2", labelKey: "tabs.home" },
|
||||
{ href: "/academy", icon: "teacher", labelKey: "tabs.academy" },
|
||||
{ href: "/projects", icon: "briefcase", labelKey: "tabs.projects" },
|
||||
{ href: "/billboards", icon: "flash-circle", labelKey: "tabs.billboards" },
|
||||
{ href: "/settings", icon: "setting", labelKey: "tabs.settings" },
|
||||
] as const;
|
||||
|
||||
type TabNavigationProps = {
|
||||
currentPage: string;
|
||||
};
|
||||
|
||||
export default function TabNavigation({ currentPage }: TabNavigationProps) {
|
||||
const { t } = useTranslation("common");
|
||||
const { isDark } = useTheme();
|
||||
const [mounted, setMounted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setMounted(true);
|
||||
}, []);
|
||||
|
||||
if (!mounted) return null;
|
||||
|
||||
return (
|
||||
<nav
|
||||
className={cn(
|
||||
"fixed bottom-2 left-1/2 z-[55] -translate-x-1/2 pb-2",
|
||||
PAGE_SHELL_CLASS
|
||||
)}
|
||||
>
|
||||
<div
|
||||
className="glass-panel gentle-transition flex justify-evenly rounded-full border border-[#C3C3C3]/60 p-2.5 shadow-lg dark:border-white/10"
|
||||
style={glassBackdropStyle("glass-panel")}
|
||||
>
|
||||
{TAB_KEYS.map((tab) => {
|
||||
const isActive =
|
||||
currentPage === tab.href ||
|
||||
(tab.href === "/settings" && currentPage.startsWith("/settings")) ||
|
||||
(tab.href === "/projects" &&
|
||||
(currentPage.startsWith("/projects") ||
|
||||
currentPage === "/new-project")) ||
|
||||
(tab.href === "/academy" && currentPage.startsWith("/academy"));
|
||||
|
||||
return (
|
||||
<Link
|
||||
key={tab.href}
|
||||
href={tab.href}
|
||||
className="gentle-transition flex flex-col items-center gap-0.5 px-2 py-1 active:scale-95"
|
||||
>
|
||||
<BoldIcon
|
||||
name={tab.icon}
|
||||
size={28}
|
||||
tinted
|
||||
className={cn(
|
||||
isActive
|
||||
? "text-[#ff107d]"
|
||||
: isDark
|
||||
? "text-white"
|
||||
: "text-zinc-600"
|
||||
)}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
"text-[10px] font-semibold gentle-transition",
|
||||
isActive ? "text-pink-500" : isDark ? "text-neutral-100" : "text-zinc-600"
|
||||
)}
|
||||
>
|
||||
{t(tab.labelKey)}
|
||||
</span>
|
||||
</Link>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user