mirror of
https://github.com/hanzoai/hanzo.industries.git
synced 2026-11-03 00:26:29 +00:00
zeekay
c93f07f2c8
- Add ThemeProvider (default: dark, system preference enabled) - Add light/dark CSS variables in globals.css - Replace hardcoded bg-black/text-white with bg-background/text-foreground - 45 files updated to use theme-aware Tailwind classes
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { useState, useEffect, type ReactNode } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export default function NavbarContainer({ children }: { children: ReactNode }) {
|
|
const [scrolled, setScrolled] = useState(false)
|
|
|
|
useEffect(() => {
|
|
const handleScroll = () => setScrolled(window.scrollY > 50)
|
|
window.addEventListener('scroll', handleScroll)
|
|
return () => window.removeEventListener('scroll', handleScroll)
|
|
}, [])
|
|
|
|
return (
|
|
<nav className="fixed top-0 left-0 right-0 z-50 transition-all duration-500">
|
|
<div
|
|
className={cn(
|
|
'mx-auto transition-all duration-500 ease-out',
|
|
scrolled
|
|
? 'mt-4 mx-4 md:mx-8 lg:mx-auto lg:max-w-6xl rounded-full backdrop-blur-xl border bg-background/80 border-border shadow-2xl shadow-background/50'
|
|
: 'bg-transparent'
|
|
)}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'max-w-7xl mx-auto flex items-center justify-between transition-all duration-500',
|
|
scrolled ? 'px-6 py-3' : 'px-4 sm:px-6 lg:px-8 py-4'
|
|
)}
|
|
>
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
)
|
|
}
|