diff --git a/src/App.tsx b/src/App.tsx index 42167ba0..522be3a0 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,19 +1,663 @@ -import { Routes, Route } from 'react-router-dom'; -import { AppProvider } from './context/AppContext'; -import Layout from './pages/Layout'; -import HomePage from './pages/HomePage'; -import ComponentDetailPage from './pages/ComponentDetailPage'; -import ResponsiveMultiLevelNavigation from './components/ResponsiveMultiLevelNavigation'; -import NotFound from './components/NotFound'; +import React, { useState, useMemo, useEffect, useCallback } from 'react'; +import { + Search, + Copy, + Check, + Sparkles, + Layout, + FileText, + Compass, + Bell, + Sun, + Moon, + Laptop, + Tablet, + Smartphone, + Sliders, + Eye, + Terminal, + Heart, + Code, + Layers, + X +} from 'lucide-react'; +import { CATEGORIES, ALL_COMPONENTS as COMPONENTS } from './data/components'; +import { InteractivePreview } from './components/InteractivePreview'; +import ErrorBoundary from './components/ErrorBoundary'; + +type TechFramework = 'html' | 'react' | 'nextjs' | 'vue' | 'angular'; +type ColorAccent = 'violet' | 'emerald' | 'rose' | 'blue' | 'amber'; export default function App() { return ( - }> - } /> - } /> - + + + {/* Background Mesh Gradients */} +
+ + {/* Floating Header */} +
+
+ +
+
+ ⚡ +
+
+ FreeUI + FreeUI + V1.2.0 OPEN-SOURCE +
+
+ + {/* Global Controls */} +
+ + {/* Accent Control */} +
+ + Global Accent: +
+ {ACCENTS.map(accent => ( +
+
+ + {/* Global Framework Control */} +
+ {FRAMEWORKS.map(fw => ( + + ))} +
+ +
+ +
+ + {/* Theme Toggle */} + + + {/* GitHub link */} + + + + + GitHub + + + +
+ +
+
+ + {/* Main Container */} +
+ + {/* HERO SECTION */} +
+ +
+ + Vibrant, Ready-to-Use UI Elements +
+ +

+ Supercharge Your Interface in{' '} + + Record Time + +

+ +

+ A premium collection of high-fidelity responsive UI components designed with CSS, Tailwind, React, Vue, Angular, and Next.js. Simply pick your stack, customize color accents, and paste directly into your project directory. +

+ + {/* Core Stats Row */} +
+ {[ + { value: '50+', label: 'Design Tokens' }, + { value: '5+', label: 'Tech Frameworks' }, + { value: '100%', label: 'Free & Open Source' }, + { value: '∞', label: 'Endless Variations' } + ].map((stat, i) => ( +
+
+
{stat.value}
+
{stat.value}
+
{stat.label}
+
+ ))} +
+ + {/* Integrated Search Bar with tags */} +
+
+
+ + setSearchQuery(e.target.value)} + className="w-full pl-12 pr-4 py-4 rounded-2xl bg-white dark:bg-slate-900 border border-slate-200 dark:border-slate-800 text-slate-900 dark:text-white placeholder-slate-400 focus:outline-none focus:ring-2 focus:ring-violet-600 focus:border-transparent transition-all shadow-xl font-medium text-sm" + /> +
+
+ +
+ + {/* COMPONENT EXPLORER */} +
+ + {/* SIDEBAR CATEGORIES */} +
+
+
+

Component Types

+
+ + + {CATEGORIES.map(cat => { + const count = COMPONENTS.filter(c => c.category === cat.id).length; + const handleTabKeyDown = useCallback(( + e: React.KeyboardEvent, + currentId: string, + items: readonly { id: string }[], + onSelect: (id: string) => void + ) => { + const idx = items.findIndex(item => item.id === currentId); + let nextIdx: number; + if (e.key === 'ArrowRight') { + e.preventDefault(); + nextIdx = (idx + 1) % items.length; + } else if (e.key === 'ArrowLeft') { + e.preventDefault(); + nextIdx = (idx - 1 + items.length) % items.length; + } else { + return; + } + onSelect(items[nextIdx].id); + }, []); + + const handleSwitchKeyDown = useCallback(( + e: React.KeyboardEvent, + current: boolean, + onToggle: (next: boolean) => void + ) => { + if (e.key === ' ' || e.key === 'Enter') { + e.preventDefault(); + onToggle(!current); + } + }, []); + + return ( + + ); + })} +
+
+ +
+

Pro Tip

+

+ Customize the preview sizing (Desktop, Tablet, Mobile) and select your framework. Copy-paste code with full Tailwind configuration. +

+
+
+
+ + {/* MAIN CONTAINER: COMPONENTS GRID */} +
+ + {filteredComponents.length === 0 ? ( +
+
+ +
+

No Components Found

+

+ We couldn't find any components matching "{debouncedQuery}". Try searching for other terms like "button", "card", "alert", or reset your category search. +

+ +
+ ) : ( + filteredComponents.map((comp) => { + const compActiveTab = activeTabs[comp.id] || globalTab; + const compAccent = accentColors[comp.id] || globalAccent; + const compSize = previewSizes[comp.id] || 'desktop'; + + const activeCode = comp.code[compActiveTab]; + + return ( +
+ {/* Top Glow Bar */} +
+ + {/* COMPONENT DESCRIPTIONS */} +
+
+
+

{comp.name}

+

{comp.name}

+ + {comp.category} + +
+

{comp.description}

+
+ + {/* INDIVIDUAL COMPONENT CONTROLS (Size & Color) */} +
+ + {/* Sizings */} +
+ {(['desktop', 'tablet', 'mobile'] as const).map(size => ( + + ))} +
+ + {/* Colors */} +
+ {ACCENTS.map(accent => ( +
+ +
+
+ + {/* TWO-COLUMN GRID: PREVIEW ON LEFT, SOURCE CODE ON RIGHT */} +
+ + {/* PREVIEW CONTAINER */} +
+
+ + Live Interactive Preview +
+
+ {/* Checked background pattern for high fidelity */} +
+ +
+ + + +
+
+
+ + {/* SOURCE CODE PANEL */} +
+
+
+ + Source Code Registry +
+ + {/* Framework Select Tabs */} +
+ {FRAMEWORKS.map(fw => ( + + ))} +
+
+ + {/* Code Display Screen */} +
+ + {/* Copy and Download trigger absolute action buttons */} +
+ + +
+ + {/* VS Code title bar controls */} +
+ + + + + {compActiveTab}.tsx + +
+ + {/* Code Display Area */} +
+ 
+                              {highlightCode(activeCode, compActiveTab)}
+
+
+ +
+
+ +
+
+ ); + }) + )} + +
+ +
+ + {/* FAQ / HIGHLIGHT SECTION */} +
+ +
+

Designed for Premium Developer Workflows

+

+ No npm installs or complex integrations required. We give you raw, pure code powered by standard tailwindcss design systems that fit perfectly into any abstraction. +

+
+ +
+ + {[ + { + title: 'Full Tailwind Syntax', + desc: 'Every element uses pure tailwind utilities, making customization as easy as changing inline classes.', + icon: + }, + { + title: 'Adaptive Layouts', + desc: 'Built with responsive containers, flexboxes, and CSS Grid to ensure clean rendering on any device dimension.', + icon: + }, + { + title: 'Zero Latency Integrations', + desc: 'Copy component codes directly into HTML, React, NextJS, Vue, or Angular without installing heavy external bundles.', + icon: + } + ].map((card, i) => ( +
+
+ {card.icon} +
+

{card.title}

+

{card.desc}

+
+ ))} + +
+ +
+ +
+ + {/* Footer */} +
+
+
+ ⚡ + FreeUI - Open Source Component Portal. +
+ +
+ Made with +
+
+
+ + {/* Live PR Playground Modal */} + {showPlayground && ( +
+
+ + {/* Modal Header */} +
+
+

+ ⚡ Live Contributor PR Playground + + TAILWIND HTML SANDBOX + +

+

+ Design, preview, and build your component live before committing a PR submission file inside the `src/registry/` folder. +

+
+ +
+ + {/* Sandbox Workspace Grid */} +
+ + {/* Code Editor Panel */} +
+
+ Tailwind Markup Editor + Pure HTML+CSS compatible +
+