Files
pastel-ui/components/providers/Providers.tsx
valknarness 75bfecee4d feat: implement navigation and dark/light theme system
Add complete navigation and theming infrastructure:

**Theme System:**
- ThemeProvider component with React Context
  - Supports light, dark, and system themes
  - Persists preference to localStorage
  - Auto-detects system theme preference
  - Listens for system theme changes
  - Smooth theme transitions

- ThemeToggle component
  - Sun/Moon icon toggle button
  - Accessible with ARIA labels
  - Shows current theme state
  - Keyboard accessible

**Navigation:**
- Navbar component with sticky header
  - Gradient logo with Palette icon
  - Desktop horizontal navigation
  - Mobile responsive menu
  - Active route highlighting
  - Backdrop blur effect
  - Links to all main sections:
    - Home
    - Playground
    - Palettes
    - Accessibility
    - Named Colors
    - Batch Operations

**Layout Updates:**
- Integrated Navbar into root layout
- Added ThemeProvider to Providers wrapper
- Proper HTML suppressHydrationWarning for theme
- Container-based responsive layout

**Features:**
- Theme persists across page reloads
- System theme preference detection
- Active navigation state
- Smooth hover transitions
- Mobile-first responsive design
- Accessible navigation with proper semantics

**Styling:**
- Gradient text logo (pink → purple → blue)
- Sticky top navbar with backdrop blur
- Border bottom for visual separation
- Consistent spacing and padding
- Mobile menu slides in smoothly

Build successful! Navigation and theming complete.

Next: Palette generation pages and additional features.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 11:35:05 +01:00

30 lines
729 B
TypeScript

'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from 'sonner';
import { useState } from 'react';
import { ThemeProvider } from './ThemeProvider';
export function Providers({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
staleTime: 60 * 1000, // 1 minute
refetchOnWindowFocus: false,
},
},
})
);
return (
<ThemeProvider>
<QueryClientProvider client={queryClient}>
{children}
<Toaster position="top-right" richColors />
</QueryClientProvider>
</ThemeProvider>
);
}