system-prompts-and-models-o.../web/components/ui/input.tsx
Claude 9d5ee88ea3
feat: Add modern Next.js 15 web interface with React 19
This commit adds a complete, production-ready web application for browsing
and exploring AI tool system prompts. The interface provides an intuitive,
responsive, and feature-rich experience for discovering AI tools.

## Web Application Features

**Core Functionality:**
- 🔍 Advanced search with real-time filtering
- 📊 Interactive statistics dashboard with visualizations
- 🔄 Side-by-side comparison of up to 4 tools
-  Favorites system with local persistence
- 📱 Fully responsive mobile-first design
- 🎨 Dark/light mode with system preference detection
-  Optimized performance with Next.js Server Components

**Pages:**
- Home: Hero section, features showcase, featured tools
- Browse: Advanced filtering, grid/list views, category filters
- Stats: Comprehensive analytics and visualizations
- Compare: Side-by-side tool comparison
- Tool Detail: In-depth tool information
- About: Project information and tech stack

**Components:**
- Responsive navbar with mobile menu
- Tool cards with interactive actions
- Reusable UI components (Button, Card, Badge, Input)
- Footer with quick links and stats
- Theme provider for dark mode
- Loading and error states

## Technical Stack

**Framework & Libraries:**
- Next.js 15 with App Router
- React 19.0 with Server Components
- TypeScript 5.6 for type safety
- Tailwind CSS for styling
- Zustand for state management
- next-themes for theme switching
- Lucide React for icons

**Features:**
- Server-side rendering (SSR)
- Static site generation (SSG) for tool pages
- Optimized bundle with automatic code splitting
- SEO-friendly with metadata API
- Accessibility best practices

## Project Structure

web/
├── app/                   # Next.js pages
├── components/            # React components
├── lib/                   # Utilities and data
├── data/                  # Static data (index.json)
├── setup.sh              # Setup script
└── README.md             # Documentation

## Developer Experience

- TypeScript for type safety
- ESLint for code quality
- Hot module replacement
- Fast refresh
- Comprehensive documentation
- Setup script for quick start

## Updated Documentation

- Enhanced main README with web interface section
- Created comprehensive web/README.md
- Updated roadmap to mark completed features
- Added Quick Start guide for web app

## Stats

- 33 new files created
- ~3,500 lines of TypeScript/TSX
- Full responsive design (mobile, tablet, desktop)
- Production-ready with build optimizations

Users can now explore 32+ AI tools through an intuitive web interface
instead of just command-line tools.

Version: 2.0.0
2025-11-15 02:20:46 +00:00

25 lines
823 B
TypeScript

import * as React from 'react'
import { cn } from '@/lib/utils'
export interface InputProps
extends React.InputHTMLAttributes<HTMLInputElement> {}
const Input = React.forwardRef<HTMLInputElement, InputProps>(
({ className, type, ...props }, ref) => {
return (
<input
type={type}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className
)}
ref={ref}
{...props}
/>
)
}
)
Input.displayName = 'Input'
export { Input }