37 lines
1.8 KiB
TypeScript
37 lines
1.8 KiB
TypeScript
|
|
import React from 'react';
|
|
|
|
export const SetupPrompt: React.FC = () => {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center py-20 px-4 text-center">
|
|
<div className="bg-amber-100 p-4 rounded-full mb-6">
|
|
<svg xmlns="http://www.w3.org/2000/svg" className="h-12 w-12 text-amber-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" />
|
|
</svg>
|
|
</div>
|
|
<h2 className="text-3xl font-bold text-gray-900 mb-2">Configuration Required</h2>
|
|
<p className="text-gray-600 max-w-md mb-8">
|
|
The application metadata is currently set to <code className="bg-gray-100 px-1 rounded text-red-600">NOTSET</code>.
|
|
Please update the <span className="font-mono font-semibold">metadata.json</span> file with your app's name and description to proceed.
|
|
</p>
|
|
|
|
<div className="bg-gray-900 text-gray-100 p-6 rounded-lg shadow-xl text-left font-mono text-sm max-w-xl w-full">
|
|
<div className="flex items-center gap-2 mb-4 border-b border-gray-700 pb-2">
|
|
<div className="w-3 h-3 rounded-full bg-red-500"></div>
|
|
<div className="w-3 h-3 rounded-full bg-yellow-500"></div>
|
|
<div className="w-3 h-3 rounded-full bg-green-500"></div>
|
|
<span className="ml-2 text-gray-400">metadata.json</span>
|
|
</div>
|
|
<pre>{`{
|
|
"name": "Your Awesome App",
|
|
"description": "A powerful tool to help users manage..."
|
|
}`}</pre>
|
|
</div>
|
|
|
|
<p className="mt-8 text-sm text-gray-500 italic">
|
|
The AI will automatically generate features and interfaces based on your definition once you reload.
|
|
</p>
|
|
</div>
|
|
);
|
|
};
|