0d03156e04
Ensure consistent spacing and alignment between header, main content, and footer: - Update Navbar to use max-w-7xl and px-8 (matching Footer) - Standardize all page containers to use px-8 py-12 padding - Change home page from max-w-5xl to max-w-7xl for consistency - Update all 12 pages to use consistent padding (px-8 py-12 instead of p-8) This creates a unified visual alignment across the entire application, with all content sections (navbar, main, footer) using the same max-width (7xl) and horizontal padding (px-8). 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
78 lines
2.5 KiB
TypeScript
78 lines
2.5 KiB
TypeScript
'use client';
|
|
|
|
import Link from 'next/link';
|
|
import { usePathname } from 'next/navigation';
|
|
import { ThemeToggle } from './ThemeToggle';
|
|
import { cn } from '@/lib/utils/cn';
|
|
import { Palette } from 'lucide-react';
|
|
|
|
const navigation = [
|
|
{ name: 'Home', href: '/' },
|
|
{ name: 'Playground', href: '/playground' },
|
|
{ name: 'Palettes', href: '/palettes' },
|
|
{ name: 'Accessibility', href: '/accessibility' },
|
|
{ name: 'Named Colors', href: '/names' },
|
|
{ name: 'Batch', href: '/batch' },
|
|
];
|
|
|
|
export function Navbar() {
|
|
const pathname = usePathname();
|
|
|
|
return (
|
|
<nav className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
|
|
<div className="max-w-7xl mx-auto px-8">
|
|
<div className="flex h-16 items-center justify-between">
|
|
{/* Logo */}
|
|
<Link href="/" className="flex items-center space-x-2 font-bold text-xl">
|
|
<Palette className="h-6 w-6 text-primary" />
|
|
<span className="bg-gradient-to-r from-pink-500 via-purple-500 to-blue-500 bg-clip-text text-transparent">
|
|
Pastel UI
|
|
</span>
|
|
</Link>
|
|
|
|
{/* Desktop Navigation */}
|
|
<div className="hidden md:flex items-center space-x-1">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'px-3 py-2 rounded-md text-sm font-medium transition-colors',
|
|
pathname === item.href
|
|
? 'bg-accent text-accent-foreground'
|
|
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
|
)}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
|
|
{/* Right side */}
|
|
<div className="flex items-center space-x-2">
|
|
<ThemeToggle />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Mobile Navigation */}
|
|
<div className="md:hidden pb-3 space-y-1">
|
|
{navigation.map((item) => (
|
|
<Link
|
|
key={item.href}
|
|
href={item.href}
|
|
className={cn(
|
|
'block px-3 py-2 rounded-md text-sm font-medium transition-colors',
|
|
pathname === item.href
|
|
? 'bg-accent text-accent-foreground'
|
|
: 'text-muted-foreground hover:bg-accent hover:text-accent-foreground'
|
|
)}
|
|
>
|
|
{item.name}
|
|
</Link>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
);
|
|
}
|