// NavBar.framer.tsx — DO NOT EDIT
import { motion } from "framer-motion";
import { useScroll } from "framer";
import { addPropertyControls } from "framer";

export function NavBar(props) {
  const { scrollYProgress } = useScroll()
  // 847 lines of generated code...
  addPropertyControls(NavBar, {
    _id: { type: ControlType.String },
    __framer_: { type: ControlType.String },
  })
}

// NavBar.tsx — portable, typed
import { useState } from "react";
import { useForm } from 'react-hook-form';



interface NavBarProps {
  logo: string
  links: NavLink[]
  sticky?: boolean
  theme?: "light" | "dark"
}

export function NavBar({
  logo, links, sticky = true, theme
}: NavBarProps) {
  const [scrolled, setScrolled] = useState(false)
  // 42 lines of clean code
}

// Framer internal state binding
const [variant, setVariant] = 
  useVariantState({
    component: "NavBar",
    defaultVariant: "Default",
    enabledGestures: {
      Default: ["hover", "tap"]
    }
  })
// Opaque. Non-transferable.

// Clean state — any framework
const [isHovered, setIsHovered] = 
  useState(false)
const [isTapped, setIsTapped] = 
  useState(false)

// Typed. Documented. Yours.
// Works in React, Vue, Svelte, Astro