Spaces:
Build error
Build error
| import { useState } from 'react'; | |
| import { Send, Loader2, CheckCircle, Code, Eye, Copy } from 'lucide-react'; | |
| export default function Generator() { | |
| const [prompt, setPrompt] = useState(''); | |
| const [isGenerating, setIsGenerating] = useState(false); | |
| const [result, setResult] = useState(null); | |
| const handleGenerate = async () { | |
| if (!prompt) return; | |
| setIsGenerating(true); | |
| // Simulate API call | |
| setTimeout(() { | |
| setResult({ | |
| code: `export default function LandingPage() { | |
| return ( | |
| <div className="min-h-screen bg-black text-white"> | |
| <nav className="p-6 flex justify-between"> | |
| <h1 className="font-bold">Brand</h1> | |
| <button>Get Started</button> | |
| </nav> | |
| <main className="pt-20 text-center"> | |
| <h2 className="text-5xl font-bold mb-4">Welcome Future</h2> | |
| <p className="text-gray-400">Built with AI.</p> | |
| </main> | |
| </div> | |
| ); | |
| }`, | |
| preview: 'Generated UI Preview' | |
| }); | |
| setIsGenerating(false); | |
| }, 2000); | |
| }; | |
| return ( | |
| <div className="flex-1 flex flex-col h-full overflow-hidden relative"> | |
| {/* Background Grid */} | |
| <div className="absolute inset-0 bg-[url('https://grainy-gradients.vercel.app/noise.svg')] opacity-20 pointer-events-none"></div> | |
| <div className="flex-1 overflow-y-auto p-4 md:p-8 max-w-5xl mx-auto w-full z-10"> | |
| {/* Input Area */} | |
| {!result && !isGenerating && ( | |
| <div className="mt-20 flex flex-col items-center text-center animate-in"> | |
| <h1 className="text-4xl md:text-6xl font-bold mb-6 tracking-tight"> | |
| Describe your <span className="gradient-text">digital reality</span> | |
| </h1> | |
| <p className="text-gray-400 mb-10 max-w-lg text-lg"> | |
| No tokens. No limits. Just pure generative power. Type what you need, get the code instantly. | |
| </p> | |
| <div className="w-full max-w-2xl relative group"> | |
| <div className="absolute -inset-1 bg-gradient-to-r from-indigo-500 to-purple-600 rounded-2xl opacity-20 group-hover:opacity-40 transition duration-500 blur"></div> | |
| <div className="relative bg-black border border-gray-800 rounded-2xl p-4 shadow-2xl"> | |
| <textarea | |
| value={prompt} | |
| onChange={(e) => setPrompt(e.target.value)} | |
| placeholder="Create a landing page for a coffee shop with a dark theme..." | |
| className="w-full bg-transparent text-white placeholder-gray-500 text-lg resize-none focus:outline-none h-32" | |
| /> | |
| <div className="flex justify-between items-center mt-4 pt-4 border-t border-gray-800/50"> | |
| <span className="text-xs text-gray-500 font-mono">AI Model: V4.0 (Unlimited)</span> | |
| <button | |
| onClick={handleGenerate} | |
| disabled={!prompt} | |
| className="bg-white text-black px-6 py-2 rounded-lg font-semibold hover:bg-gray-200 transition-colors flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed" | |
| > | |
| Generate <Send className="w-4 h-4" /> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| )} | |
| {/* Loading State */} | |
| {isGenerating && ( | |
| <div className="mt-20 flex flex-col items-center"> | |
| <div className="relative w-24 h-24"> | |
| <div className="absolute inset-0 border-4 border-indigo-500/30 rounded-full"></div> | |
| <div className="absolute inset-0 border-4 border-indigo-500 rounded-full animate-spin border-top-transparent"></div> | |
| <Loader2 className="w-12 h-12 text-indigo-500 absolute inset-0 animate-pulse" /> | |
| </div> | |
| <h3 className="mt-8 text-2xl font-semibold text-white">Architecting Interface...</h3> | |
| <p className="text-gray-400 mt-2">Analyzing constraints & optimizing layout</p> | |
| </div> | |
| )} | |
| {/* Result State */} | |
| {result && ( | |
| <div className="space-y-6 animate-in"> | |
| <div className="flex justify-between items-center mb-4"> | |
| <h2 className="text-2xl font-bold text-white">Generated Result</h2> | |
| <div className="flex gap-2"> | |
| <button className="px-4 py-2 bg-gray-800 hover:bg-gray-700 text-white rounded-lg text-sm font-medium flex items-center gap-2 transition-colors"> | |
| <Eye className="w-4 h-4" /> Preview | |
| </button> | |
| <button className="px-4 py-2 bg-indigo-600 hover:bg-indigo-700 text-white rounded-lg text-sm font-medium flex items-center gap-2 transition-colors"> | |
| <Copy className="w-4 h-4" /> Copy Code | |
| </button> | |
| </div> | |
| </div> | |
| <div className="grid md:grid-cols-2 gap-6 h-[600px]"> | |
| {/* Code Editor View */} | |
| <div className="bg-[#0d1117] rounded-xl border border-gray-800 p-4 font-mono text-sm overflow-auto text-gray-300 shadow-lg"> | |
| <div className="flex items-center gap-2 mb-4 border-b border-gray-800 pb-2"> | |
| <Code className="w-4 h-4 text-indigo-400" /> | |
| <span className="text-xs text-gray-500">App.jsx</span> | |
| </div> | |
| <pre>{result.code}</pre> | |
| </div> | |
| {/* Visual Preview */} | |
| <div className="bg-white rounded-xl border border-gray-200 overflow-hidden relative flex flex-col"> | |
| <div className="h-8 bg-gray-100 border-b border-gray-200 flex items-center px-4 gap-2"> | |
| <div className="w-3 h-3 rounded-full bg-red-400"></div> | |
| <div className="w-3 h-3 rounded-full bg-yellow-400"></div> | |
| <div className="w-3 h-3 rounded-full bg-green-400"></div> | |
| </div> | |
| <div className="flex-1 bg-black text-white p-8 flex flex-col justify-center items-center"> | |
| <h1 className="text-3xl font-bold mb-4">Coffee & Code</h1> | |
| <p className="text-gray-400">The best brew for developers.</p> | |
| <button className="mt-6 px-6 py-2 bg-indigo-600 rounded-full text-sm font-bold">Order Now</button> | |
| </div> | |
| </div> | |
| </div> | |
| <div className="mt-8 flex justify-center"> | |
| <button | |
| onClick={() { setResult(null); setPrompt(''); }} | |
| className="text-gray-400 hover:text-white underline underline-offset-4" | |
| > | |
| Start New Generation | |
| </button> | |
| </div> | |
| </div> | |
| )} | |
| </div> | |
| </div> | |
| ); | |
| } |