Files

30 lines
729 B
TypeScript
Raw Permalink Normal View History

feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
'use client';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { Toaster } from 'sonner';
import { useState } from 'react';
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
import { ThemeProvider } from './ThemeProvider';
feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
export function Providers({ children }: { children: React.ReactNode }) {
const [queryClient] = useState(
() =>
new QueryClient({
defaultOptions: {
queries: {
staleTime: 60 * 1000, // 1 minute
refetchOnWindowFocus: false,
},
},
})
);
return (
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
<ThemeProvider>
<QueryClientProvider client={queryClient}>
{children}
<Toaster position="top-right" richColors />
</QueryClientProvider>
</ThemeProvider>
feat: initial Next.js 15 implementation with TypeScript and Tailwind CSS 4 Add complete project structure and foundation: **Core Setup:** - Next.js 15.5.6 with App Router and React 19 - TypeScript 5.7 with strict mode - Tailwind CSS 4.1 with custom theme configuration - ESLint and Prettier configuration **Dependencies Installed:** - @tanstack/react-query - Server state management - zustand - Client state management - framer-motion - Animations - lucide-react - Icon library - react-colorful - Color picker component - cmdk - Command palette - sonner - Toast notifications - clsx + tailwind-merge - Class name utilities **Project Structure:** - app/ - Next.js App Router pages - components/ - React components (ui, color, tools, layout, providers) - lib/ - Utilities, API client, hooks, stores, constants - tests/ - Unit and E2E test directories **API Integration:** - Type-safe Pastel API client with all 21 endpoints - Complete TypeScript type definitions for requests/responses - Error handling and response types **UI Components:** - Button component with variants (default, outline, ghost, destructive) - Input component with focus states - Providers wrapper (React Query, Toast) - Root layout with Inter font and metadata **Pages:** - Home page with gradient hero and feature cards - Links to playground and palette generation (pages pending) **Configuration:** - Tailwind with HSL color variables for theming - Dark/light mode CSS variables - Custom animations (fade-in, slide-up, slide-down) - @tailwindcss/forms and @tailwindcss/typography plugins Build successful: 102 kB First Load JS, static generation working. Ready for color components and playground implementation. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
2025-11-07 10:55:42 +01:00
);
}