Spaces:
Build error
Build error
File size: 6,783 Bytes
5883bcf | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 | 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>
);
} |