{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "responsive-header-default",
  "dependencies": [
    "motion"
  ],
  "devDependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "./components/ui/responsive-header.tsx",
      "content": "'use client';\n\nimport { MenuIcon } from 'lucide-react';\nimport React, { createContext, type ReactNode, useContext, useEffect, useState } from 'react';\nimport { Drawer as VaulHeader } from 'vaul';\n\ninterface DrawerContextProps {\n  open: boolean;\n  setOpen: (open: boolean) => void;\n}\n\nconst DrawerContext = createContext<DrawerContextProps | undefined>(undefined);\n\nconst useSidebarDrawer = () => {\n  const context = useContext(DrawerContext);\n  if (!context) {\n    throw new Error('useDrawer must be used within a DrawerProvider');\n  }\n  return context;\n};\n\ninterface DrawerSidebarProps {\n  children: ReactNode;\n  open?: boolean;\n  setOpen?: (open: boolean) => void;\n  drawerBtn?: any | null;\n}\n\nexport function HeaderDrawer({\n  children,\n  open: controlledOpen,\n  setOpen: controlledSetOpen,\n  drawerBtn,\n}: DrawerSidebarProps) {\n  const [internalOpen, setInternalOpen] = useState(false);\n  const open = controlledOpen !== undefined ? controlledOpen : internalOpen;\n  const setOpen = controlledSetOpen !== undefined ? controlledSetOpen : setInternalOpen;\n\n  const [isDesktop, setIsDesktop] = useState(false);\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia('(min-width: 768px)');\n    const handleMediaChange = (event: MediaQueryListEvent) => {\n      setIsDesktop(event.matches);\n    };\n\n    setIsDesktop(mediaQuery.matches);\n    mediaQuery.addEventListener('change', handleMediaChange);\n\n    return () => {\n      mediaQuery.removeEventListener('change', handleMediaChange);\n    };\n  }, []);\n  console.log(drawerBtn);\n\n  return (\n    <DrawerContext.Provider value={{ open, setOpen }}>\n      <>\n        <VaulHeader.Root\n          open={open}\n          direction='top'\n          onOpenChange={setOpen}\n          dismissible={isDesktop ? false : true}\n        >\n          {drawerBtn && <VaulHeader.Trigger asChild>{drawerBtn()}</VaulHeader.Trigger>}\n          <VaulHeader.Portal>\n            <VaulHeader.Overlay\n              className='fixed inset-0 dark:bg-black/40 bg-white/50 backdrop-blur-xs z-50  '\n              onClick={() => setOpen(false)}\n            />\n            <VaulHeader.Content className='dark:bg-neutral-900 bg-white  border-b z-50 w-full h-fit py-3 fixed top-0 left-0'>\n              {children}\n            </VaulHeader.Content>\n          </VaulHeader.Portal>\n        </VaulHeader.Root>\n      </>\n    </DrawerContext.Provider>\n  );\n}\n\nexport function DrawerContent({ children }: { children: ReactNode }) {\n  return <>{children}</>;\n}\n",
      "type": "registry:component"
    },
    {
      "path": "./registry/components/drawer/responsive-header.tsx",
      "content": "'use client';\nimport { DrawerContent, HeaderDrawer } from '@/components/ui/responsive-header';\nimport { useMediaQuery } from '@/hooks/use-media-query';\nimport { MenuIcon, X } from 'lucide-react';\nimport Link from 'next/link';\nimport { useState } from 'react';\n\nconst items = [\n  {\n    id: 1,\n    classname: 'bg-linear-to-l from-red-400 to-orange-500',\n  },\n  {\n    classname: 'bg-linear-to-r from-blue-300 to-blue-800',\n    id: 2,\n  },\n  {\n    classname: 'bg-linear-to-tl from-amber-500 to-yellow-400',\n    id: 3,\n  },\n];\nexport default function ResponsiveHeader() {\n  const [headerOpen, setHeaderOpen] = useState(false);\n  const isDesktop = useMediaQuery('(min-width: 768px)');\n\n  return (\n    <>\n      <header className='flex justify-between border items-center p-3 bg-white rounded-md dark:bg-black/45 backdrop-blur-md'>\n        <h1>Logo</h1>\n        <HeaderDrawer\n          open={headerOpen}\n          setOpen={setHeaderOpen}\n          drawerBtn={() => {\n            return (\n              <button>\n                <MenuIcon />\n              </button>\n            );\n          }}\n        >\n          <DrawerContent>\n            {!isDesktop && (\n              <div className='flex justify-center w-full absolute bottom-1 left-0 '>\n                <div className=' w-16 h-[0.30rem] shrink-0 rounded-full bg-neutral-600 my-4' />\n              </div>\n            )}\n            <div className='container mx-auto  gap-4'>\n              <div className='flex justify-between items-center border-b'>\n                {isDesktop && (\n                  <button\n                    className='flex justify-start p-2 mb-2 rounded-md dark:bg-white dark:text-black bg-black text-white'\n                    onClick={() => setHeaderOpen(false)}\n                  >\n                    <X />\n                  </button>\n                )}\n                <h1 className='mx-auto text-2xl'>UI-LAYOUT</h1>\n              </div>\n              <div className='flex justify-between xl:px-0 px-2 py-2'>\n                <nav className='flex gap-8'>\n                  <ul className='xl:text-2xl text-lg space-y-2 xl:space-y-4 font-semibold uppercase  pr-8'>\n                    <li>\n                      <Link\n                        href='/'\n                        className='relative flex items-center gap-2 after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 dark:after:bg-white \n      after:bg-neutral-800 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100'\n                      >\n                        Home\n                      </Link>\n                    </li>\n                    <li>\n                      <Link\n                        href='/components'\n                        className='relative flex gap-2 items-center after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 dark:after:bg-white \n      after:bg-neutral-800 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100'\n                      >\n                        Components\n                      </Link>\n                    </li>\n                    <li>\n                      <Link\n                        href='/layouts'\n                        className='relative flex gap-2 items-center after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 dark:after:bg-white \n      after:bg-neutral-800 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100'\n                      >\n                        Layouts\n                      </Link>\n                    </li>\n                    <li>\n                      <Link\n                        href='/templates'\n                        className='relative flex items-center gap-2 after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 dark:after:bg-white \n      after:bg-neutral-800 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100'\n                      >\n                        Templates\n                      </Link>\n                    </li>\n                    <li>\n                      <Link\n                        href='/open-source'\n                        className='relative flex items-center gap-2 after:absolute after:bottom-0 after:left-0 after:h-[2px] after:w-full after:origin-bottom-right after:scale-x-0 dark:after:bg-white \n      after:bg-neutral-800 after:transition-transform after:duration-300 after:ease-[cubic-bezier(0.65_0.05_0.36_1)] hover:after:origin-bottom-left hover:after:scale-x-100'\n                      >\n                        Open Source\n                      </Link>\n                    </li>\n                  </ul>\n                </nav>\n                {isDesktop && (\n                  <div className='grid grid-cols-3 gap-4 py-4 pr-20 w-full'>\n                    <>\n                      {items.map((item) => (\n                        <figure\n                          key={item.id}\n                          className={`${item.classname} inline-block group w-full xl:h-52 h-full relative rounded-md `}\n                        ></figure>\n                      ))}\n                    </>\n                  </div>\n                )}\n              </div>\n            </div>\n          </DrawerContent>\n        </HeaderDrawer>\n      </header>\n    </>\n  );\n}\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}