The Navbar will show on top of the page

); } function Navbar({ className }: { className?: string }) { const [active, setActive] = useState(null); return (

Web Development Interface Design Search Engine Optimization Branding

Hobby Individual Team Enterprise

); } `,__rawStringJsx__:`"use client"; import React, { useState } from "react"; import { HoveredLink, Menu, MenuItem, ProductItem } from "../ui/navbar-menu"; import { cn } from "@/lib/utils"; export function NavbarDemo() { return ( (

The Navbar will show on top of the page

) ); } function Navbar({ className }) { const [active, setActive] = useState(null); return ( (

Web Development Interface Design Search Engine Optimization Branding

Hobby Individual Team Enterprise

) ); } `,__src__:"src/registry/default/example/navbar-menu-demo.tsx",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"HoveredLink"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Menu"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"MenuItem"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"ProductItem"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"../ui/navbar-menu"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"@/lib/utils"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"NavbarDemo"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"relative w-full flex items-center justify-center"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Navbar"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"top-2"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"text-black dark:text-white"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" The Navbar will show on top of the page"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"Navbar"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"({ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ["}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"active"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"] "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"useState"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"<"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" | "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:");"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"fixed top-10 inset-x-0 max-w-2xl mx-auto z-50"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Menu"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"MenuItem"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"active"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Services"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"flex flex-col space-y-4 text-sm"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HoveredLink"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"/web-dev"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Web Development"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HoveredLink"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"/interface-design"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Interface Design"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HoveredLink"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"/seo"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Search Engine Optimization"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HoveredLink"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"/branding"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Branding"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"MenuItem"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"active"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Products"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'" text-sm grid grid-cols-2 gap-10 p-4"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ProductItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Algochurn"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"https://algochurn.com"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/algochurn.webp"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Prepare for tech interviews like never before."'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ProductItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Tailwind Master Kit"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"https://tailwindmasterkit.com"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/tailwindmasterkit.webp"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Production ready Tailwind css components for your next project"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ProductItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Moonbeam"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"https://gomoonbeam.com"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/Screenshot+2024-02-21+at+11.51.31%E2%80%AFPM.png"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Never write from scratch again. Go from idea to blog in minutes."'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ProductItem"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Rogue"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"https://userogue.com"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"https://assets.aceternity.com/demos/Screenshot+2024-02-21+at+11.47.07%E2%80%AFPM.png"'})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Respond to government RFPs, RFIs and RFQs 10x faster using AI"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"MenuItem"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"active"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"Pricing"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"flex flex-col space-y-4 text-sm"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HoveredLink"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"/hobby"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Hobby"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HoveredLink"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"/individual"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Individual"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HoveredLink"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"/team"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Team"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"HoveredLink"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"/enterprise"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">Enterprise"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})})}),` `,(0,e.jsxs)(l.h2,{id:"installation",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#installation",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,e.jsxs)(o,{defaultValue:"manual",children:[(0,e.jsxs)(r,{children:[(0,e.jsx)(i,{value:"cli",children:"CLI"}),(0,e.jsx)(i,{value:"manual",children:"Manual"})]}),(0,e.jsx)(d,{value:"cli",children:(0,e.jsxs)(B,{children:[(0,e.jsx)(a,{children:"Run the following command"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx aceternity-ui@latest add navbar-menu `,__npmCommand__:`npx aceternity-ui@latest add navbar-menu `,__yarnCommand__:`npx aceternity-ui@latest add navbar-menu `,__pnpmCommand__:`pnpm dlx aceternity-ui@latest add navbar-menu `,__bunCommand__:`bunx --bun aceternity-ui@latest add navbar-menu `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npx "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"aceternity-ui@latest"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"add"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"navbar-menu"})]})})})})]})}),(0,e.jsx)(d,{value:"manual",children:(0,e.jsxs)(B,{children:[(0,e.jsx)(a,{children:"Install dependencies"}),(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm i framer-motion clsx tailwind-merge `,children:(0,e.jsx)(l.code,{"data-language":"bash","data-theme":"default",children:(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"npm "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"i"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"framer-motion"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:"tailwind-merge"})]})})})}),(0,e.jsx)(a,{children:"Add util file"}),(0,e.jsxs)(l.div,{"data-rehype-pretty-code-fragment":"",children:[(0,e.jsx)(l.div,{"data-rehype-pretty-code-title":"","data-language":"tsx","data-theme":"default",children:"lib/utils.ts"}),(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__withMeta__:!0,__rawString__:`import { ClassValue, clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } `,__rawStringJsx__:`import { clsx } from "clsx"; import { twMerge } from "tailwind-merge"; export function cn(...inputs) { return twMerge(clsx(inputs)); } `,children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"ClassValue"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"clsx"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"twMerge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"tailwind-merge"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"function"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"cn"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"(..."}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"inputs"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ClassValue"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"[]) {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"twMerge"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"clsx"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"inputs"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"));"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}"})})]})})]}),(0,e.jsx)(a,{children:"Copy the source code"}),(0,e.jsx)(l.p,{children:(0,e.jsx)(l.code,{children:"components/ui/navbar-menu.tsx"})}),(0,e.jsx)(h,{name:"navbar-menu",children:(0,e.jsx)(l.div,{"data-rehype-pretty-code-fragment":"",children:(0,e.jsx)(l.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client"; import React from "react"; import { motion } from "framer-motion"; import Link from "next/link"; import Image from "next/image"; const transition = { type: "spring", mass: 0.5, damping: 11.5, stiffness: 100, restDelta: 0.001, restSpeed: 0.001, }; export const MenuItem = ({ setActive, active, item, children, }: { setActive: (item: string) => void; active: string | null; item: string; children?: React.ReactNode; }) => { return (

setActive(item)} className="relative "> {item} {active !== null && ( {active === item && (

{children}

)} )}

); }; export const Menu = ({ setActive, children, }: { setActive: (item: string | null) => void; children: React.ReactNode; }) => { return ( ); }; export const ProductItem = ({ title, description, href, src, }: { title: string; description: string; href: string; src: string; }) => { return ( {title}

{title}

{description}

); }; export const HoveredLink = ({ children, ...rest }: any) => { return ( {children} ); }; `,__rawStringJsx__:`"use client"; import React from "react"; import { motion } from "framer-motion"; import Link from "next/link"; import Image from "next/image"; const transition = { type: "spring", mass: 0.5, damping: 11.5, stiffness: 100, restDelta: 0.001, restSpeed: 0.001, }; export const MenuItem = ({ setActive, active, item, children }) => { return ( (

setActive(item)} className="relative "> {item} {active !== null && ( {active === item && (

{children}

)} )}

) ); }; export const Menu = ({ setActive, children }) => { return ( () ); }; export const ProductItem = ({ title, description, href, src }) => { return ( ( {title}

{title}

{description}

) ); }; export const HoveredLink = ({ children, ...rest }) => { return ( ( {children} ) ); }; `,__src__:"src/registry/default/ui/navbar-menu.tsx",__style__:"default",children:(0,e.jsxs)(l.code,{"data-language":"tsx","data-theme":"default",children:[(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"use client"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"react"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" { "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"motion"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" } "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"framer-motion"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Link"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"next/link"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"import"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"Image"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"from"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"next/image"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"type"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"spring"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"mass"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.5"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"damping"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"11.5"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"stiffness"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"100"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"restDelta"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.001"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"restSpeed"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.001"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"MenuItem"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}: {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ("}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"void"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" | "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"?"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}) "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onMouseEnter"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"relative "'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.p"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"duration"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.3"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"cursor-pointer text-black hover:opacity-[0.9] dark:text-white"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"!=="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"initial"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"scale"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0.85"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"10"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"animate"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"{ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"opacity"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"scale"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"1"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"y"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"0"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"active"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"==="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"&&"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"absolute top-[calc(100%_+_1.2rem)] left-1/2 transform -translate-x-1/2 pt-4"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"transition"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layoutId"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"active"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// layoutId ensures smooth animation"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"bg-white dark:bg-black backdrop-blur-sm rounded-2xl overflow-hidden border border-black/[0.2] dark:border-white/[0.2] shadow-xl"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"motion.div"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"layout"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// layout ensures smooth animation"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"w-max h-full p-4"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" )"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"Menu"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}: {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": ("}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"item"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" | "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"void"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"React"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"."}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"ReactNode"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}) "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"nav"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"onMouseLeave"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"() "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"setActive"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"("}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"null"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:")"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#7F848E",fontStyle:"italic"},children:"// resets the state"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"relative rounded-full border border-transparent dark:bg-black dark:border-white/[0.2] bg-white shadow-input flex justify-center space-x-4 px-8 py-6 "'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"ProductItem"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:","})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}: {"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:": "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"string"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:";"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"}) "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Link"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"href"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"flex space-x-2"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Image"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"src"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"width"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"140"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"height"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#D19A66"},children:"70"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"alt"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"flex-shrink-0 rounded-md shadow-2xl"'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" />"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"div"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"h4"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"text-xl font-bold mb-1 text-black dark:text-white"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"title"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"p"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-700 text-sm max-w-[10rem] dark:text-neutral-300"'}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:">"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"description"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})}),` `,(0,e.jsx)(l.span,{className:"line",children:" "}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"export"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"const"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#61AFEF"},children:"HoveredLink"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ({ "}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:", ..."}),(0,e.jsx)(l.span,{style:{color:"#E06C75",fontStyle:"italic"},children:"rest"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" }: "}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"any"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:") "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"=>"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" {"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"return"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" ("})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" <"}),(0,e.jsx)(l.span,{style:{color:"#E5C07B"},children:"Link"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"..."}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"rest"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#D19A66",fontStyle:"italic"},children:"className"}),(0,e.jsx)(l.span,{style:{color:"#56B6C2"},children:"="}),(0,e.jsx)(l.span,{style:{color:"#98C379"},children:'"text-neutral-700 dark:text-neutral-200 hover:text-black "'})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" >"})}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"{"}),(0,e.jsx)(l.span,{style:{color:"#E06C75"},children:"children"}),(0,e.jsx)(l.span,{style:{color:"#C678DD"},children:"}"})]}),` `,(0,e.jsxs)(l.span,{className:"line",children:[(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" "})]}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:" );"})}),` `,(0,e.jsx)(l.span,{className:"line",children:(0,e.jsx)(l.span,{style:{color:"#ABB2BF"},children:"};"})})]})})})})]})})]}),` `,(0,e.jsxs)(l.h2,{id:"props",children:[(0,e.jsx)(l.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#props",children:(0,e.jsx)(l.span,{className:"icon icon-link"})}),"Props"]}),` `,(0,e.jsxs)(l.table,{children:[(0,e.jsx)(l.thead,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.th,{children:"Prop name"}),(0,e.jsx)(l.th,{children:"Type"}),(0,e.jsx)(l.th,{children:"Description"})]})}),(0,e.jsx)(l.tbody,{children:(0,e.jsxs)(l.tr,{children:[(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"className"})}),(0,e.jsx)(l.td,{children:(0,e.jsx)(l.code,{children:"string"})}),(0,e.jsx)(l.td,{children:"The class name of the child component."})]})})]})]})}function b(n={}){let{wrapper:l}=n.components||{};return l?(0,e.jsx)(l,Object.assign({},n,{children:(0,e.jsx)(A,n)})):A(n)}var k=b;function c(n,l){throw new Error("Expected "+(l?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return x(w);})(); ;return Component;

Aceternity UI