mirror of
https://github.com/walkxcode/dashboard-icons.git
synced 2025-11-18 17:47:30 +01:00
7fe7d43c1a
- Replace popover-based combobox with direct input field - Add inline dropdown showing existing icons (max 50 for performance) - Implement real-time search filtering on both value and label - Track raw input separately for instant search feedback - Display existing icons as warnings with AlertCircle icons - Add proper validation error display with TanStack Form integration - Show validation errors in red below input - Add aria-invalid and aria-describedby for accessibility - Sync raw input with sanitized value on blur - Prevent selecting existing icons (shows as not allowed)
Dashboard Icons Web App
A web application to browse, search, and download icons from the Dashboard Icons collection.
Features
- Browse through a curated collection of beautiful dashboard icons
- Search icons by name, aliases, or categories
- View icon details including author, formats, and variants
- Download icons in different formats (SVG, PNG, WebP)
- Copy icon URLs directly to your clipboard
- Responsive design that works on mobile, tablet, and desktop
- Dark mode support
Tech Stack
- Next.js 15 - React framework with App Router
- TypeScript v5 - Type-safe JavaScript
- Tailwind CSS - Utility-first CSS framework
- Shadcn UI - Reusable components built with Radix UI and Tailwind
Project Structure
src/
├── app/ # Next.js App Router
│ ├── api/ # API routes
│ │ └── icons/ # Icons browsing and detail pages
│ │ ├── [icon]/ # Dynamic icon detail page
│ │ │ ├── components/ # Icon-specific components
│ │ │ ├── error.tsx # Error handling
│ │ │ ├── loading.tsx # Loading state
│ │ │ └── page.tsx # Icon detail page
│ │ ├── components/ # Icons page components
│ │ ├── loading.tsx # Loading state
│ │ └── page.tsx # Icons browse page
│ ├── globals.css # Global styles
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Homepage
│ └── theme-provider.tsx # Theme provider component
├── components/ # Shared components
│ ├── ui/ # UI components (from shadcn/ui)
│ ├── header.tsx # App header
│ └── theme-switcher.tsx # Theme switcher
├── lib/ # Utility functions
│ ├── api.ts # API utilities
│ └── utils.ts # General utilities
└── types/ # TypeScript type definitions
├── icons.ts # Icon-related types
└── index.ts # Type exports
Development
Prerequisites
- Node.js 18+
- pnpm
Installation
- Clone the repository
- Install dependencies:
pnpm install - Create a
.envfile with the following variables:GITHUB_TOKEN=your_github_token - Start the development server:
pnpm dev
Build
pnpm build
Deployment
The application is optimized for deployment on Vercel.
Contributing
Contributions are welcome! Please feel free to submit a Pull Request.