` }, 'Weather Dashboard': { html: `

Weather Dashboard

☀️
72°F
Sunny
💨
12 mph
Wind Speed
💧
65%
Humidity
` }, 'Portfolio': { html: `

Hi, I'm a Creator

Building beautiful digital experiences

` } }; const selectedTemplate = Object.keys(mockApps)[Math.floor(Math.random() * Object.keys(mockApps).length)]; const newApp = { id: Date.now(), name: appName || selectedTemplate, description: appDescription || `A beautiful ${selectedTemplate} built with Imacximus App Builder`, prompt: appPrompt, html: mockApps[selectedTemplate], createdAt: new Date().toLocaleDateString(), isPublished: false }; setApps([...apps, newApp]); setSelectedApp(newApp); setShowNewAppModal(false); setAppName(''); setAppDescription(''); setAppPrompt(''); setIsGenerating(false); }, [apps, appName, appDescription, appPrompt]); const publishApp = useCallback(() => { if (selectedApp) { const url = `imacximusappbuilder.com/${selectedApp.id}`; setPublishUrl(url); const updatedApp = { ...selectedApp, isPublished: true }; setApps(apps.map(a => a.id === selectedApp.id ? updatedApp : a)); setSelectedApp(updatedApp); setPublishedApps([...publishedApps, updatedApp]); setShowPublishModal(true); } }, [selectedApp, apps, publishedApps]); const deleteApp = useCallback((id) => { setApps(apps.filter(a => a.id !== id)); if (selectedApp?.id === id) { setSelectedApp(null); } }, [apps, selectedApp]); return (
{/* Header */}

Imacximus App Builder

{apps.length} apps created
{!selectedApp ? (
{/* No App Selected - Dashboard */}

Your Apps

{apps.length === 0 ? (

No apps yet

Create your first app using AI. Just describe what you want!

) : (
{apps.map(app => (
setSelectedApp(app)} className="bg-white rounded-2xl border border-gray-100 shadow-sm p-6 hover:shadow-lg hover:border-blue-200 transition duration-300 cursor-pointer group" >
{app.isPublished && ( Published )}

{app.name}

{app.description}

{app.createdAt}
))}
)}
{publishedApps.length > 0 && (

Published Apps

{publishedApps.map(app => (
Live

{app.name}

{app.description}

Public URL:

{`imacximusappbuilder.com/${app.id}`}

))}
)}
) : (
{/* App Editor Header */}

{selectedApp.name}

{selectedApp.createdAt}

{!selectedApp.isPublished && ( )} {selectedApp.isPublished && ( Published )}
{/* Tabs */}
{/* Content */}
{activeTab === 'builder' ? (

App Preview