system-prompts-and-models-o.../web/lib/data.ts
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

102 lines
2.9 KiB
TypeScript

import { AITool, ToolIndex } from './types'
import indexData from '../data/index.json'
export function getToolIndex(): ToolIndex {
return indexData as ToolIndex
}
export function getAllTools(): AITool[] {
const index = getToolIndex()
return index.tools
}
export function getToolByDirectory(directory: string): AITool | undefined {
const tools = getAllTools()
return tools.find(tool => tool.directory === directory)
}
export function getToolsByCategory(category: string): AITool[] {
const tools = getAllTools()
return tools.filter(tool => tool.category === category)
}
export function getToolsByCompany(company: string): AITool[] {
const tools = getAllTools()
return tools.filter(tool => tool.company === company)
}
export function searchTools(query: string): AITool[] {
if (!query) return getAllTools()
const lowercaseQuery = query.toLowerCase()
const tools = getAllTools()
return tools.filter(tool => {
return (
tool.name.toLowerCase().includes(lowercaseQuery) ||
tool.description.toLowerCase().includes(lowercaseQuery) ||
tool.company.toLowerCase().includes(lowercaseQuery) ||
tool.category.toLowerCase().includes(lowercaseQuery) ||
tool.models.some(model => model.toLowerCase().includes(lowercaseQuery))
)
})
}
export function getCategories(): string[] {
const index = getToolIndex()
return Object.keys(index.stats.by_category).sort()
}
export function getCompanies(): string[] {
const tools = getAllTools()
const companies = new Set(tools.map(tool => tool.company))
return Array.from(companies).sort()
}
export function getModels(): string[] {
const tools = getAllTools()
const models = new Set<string>()
tools.forEach(tool => {
tool.models.forEach(model => models.add(model))
})
return Array.from(models).sort()
}
export function getStats() {
const index = getToolIndex()
return index.stats
}
export function getCategoryIcon(category: string): string {
const icons: Record<string, string> = {
'Code Assistant': '💻',
'IDE': '🏢',
'AI Agent': '🤖',
'Web Builder': '🌐',
'Terminal': '🖥️',
'Cloud IDE': '🏭',
'Document Assistant': '📝',
'Search Assistant': '🔍',
'Foundation Model': '🧠',
'Collection': '📚',
'Unknown': '❓',
}
return icons[category] || '📦'
}
export function getCategoryColor(category: string): string {
const colors: Record<string, string> = {
'Code Assistant': 'from-blue-500 to-cyan-500',
'IDE': 'from-purple-500 to-pink-500',
'AI Agent': 'from-green-500 to-emerald-500',
'Web Builder': 'from-orange-500 to-red-500',
'Terminal': 'from-gray-500 to-slate-500',
'Cloud IDE': 'from-indigo-500 to-blue-500',
'Document Assistant': 'from-yellow-500 to-orange-500',
'Search Assistant': 'from-pink-500 to-rose-500',
'Foundation Model': 'from-violet-500 to-purple-500',
'Collection': 'from-teal-500 to-cyan-500',
}
return colors[category] || 'from-gray-500 to-slate-500'
}