mirror of
https://github.com/MODSetter/SurfSense.git
synced 2026-04-25 00:36:31 +02:00
Merge pull request #1212 from mmatsumoto1026/fix/define-proper-interfaces-for-navprops
fix: define proper interfaces for navprops
This commit is contained in:
commit
e273197ed2
1 changed files with 21 additions and 4 deletions
|
|
@ -9,11 +9,28 @@ import { Logo } from "@/components/Logo";
|
|||
import { ThemeTogglerComponent } from "@/components/theme/theme-toggle";
|
||||
import { cn } from "@/lib/utils";
|
||||
|
||||
interface NavItem {
|
||||
name: string;
|
||||
link: string;
|
||||
}
|
||||
|
||||
interface NavbarProps {
|
||||
/** Override the scrolled-state background classes (desktop & mobile). */
|
||||
scrolledBgClassName?: string;
|
||||
}
|
||||
|
||||
interface DesktopNavProps {
|
||||
navItems: NavItem[];
|
||||
isScrolled: boolean;
|
||||
scrolledBgClassName?: string;
|
||||
}
|
||||
|
||||
interface MobileNavProps {
|
||||
navItems: NavItem[];
|
||||
isScrolled: boolean;
|
||||
scrolledBgClassName?: string;
|
||||
}
|
||||
|
||||
export const Navbar = ({ scrolledBgClassName }: NavbarProps = {}) => {
|
||||
const [isScrolled, setIsScrolled] = useState(false);
|
||||
|
||||
|
|
@ -52,7 +69,7 @@ export const Navbar = ({ scrolledBgClassName }: NavbarProps = {}) => {
|
|||
);
|
||||
};
|
||||
|
||||
const DesktopNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
|
||||
const DesktopNav = ({ navItems, isScrolled, scrolledBgClassName }: DesktopNavProps) => {
|
||||
const [hovered, setHovered] = useState<number | null>(null);
|
||||
return (
|
||||
<motion.div
|
||||
|
|
@ -75,7 +92,7 @@ const DesktopNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
|
|||
<span className="dark:text-white/90 text-gray-800 text-lg font-bold">SurfSense</span>
|
||||
</Link>
|
||||
<div className="hidden flex-1 flex-row items-center justify-center space-x-2 text-sm font-medium text-zinc-600 transition duration-200 hover:text-zinc-800 lg:flex lg:space-x-2">
|
||||
{navItems.map((navItem: any, idx: number) => (
|
||||
{navItems.map((navItem: NavItem, idx: number) => (
|
||||
<Link
|
||||
onMouseEnter={() => setHovered(idx)}
|
||||
onMouseLeave={() => setHovered(null)}
|
||||
|
|
@ -118,7 +135,7 @@ const DesktopNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
|
|||
);
|
||||
};
|
||||
|
||||
const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
|
||||
const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: MobileNavProps) => {
|
||||
const [open, setOpen] = useState(false);
|
||||
const navRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
|
|
@ -183,7 +200,7 @@ const MobileNav = ({ navItems, isScrolled, scrolledBgClassName }: any) => {
|
|||
transition={{ duration: 0.2, ease: "easeOut" }}
|
||||
className="absolute inset-x-0 top-full mt-1 z-20 flex w-full flex-col items-start justify-start gap-4 rounded-xl bg-white/90 backdrop-blur-xl border border-white/20 shadow-2xl px-4 py-6 dark:bg-neutral-950/90 dark:border-neutral-800/50"
|
||||
>
|
||||
{navItems.map((navItem: any, idx: number) => (
|
||||
{navItems.map((navItem: NavItem, idx: number) => (
|
||||
<Link
|
||||
key={`link=${idx}`}
|
||||
href={navItem.link}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue