84 lines
3.2 KiB
TypeScript
84 lines
3.2 KiB
TypeScript
import { useState } from 'react'
|
||
|
||
function App() {
|
||
const [count, setCount] = useState(0)
|
||
|
||
return (
|
||
<div className="min-h-screen bg-gray-900 text-white flex items-center justify-center">
|
||
<div className="max-w-4xl mx-auto p-8">
|
||
<div className="text-center">
|
||
<h1 className="text-5xl font-bold mb-4 bg-gradient-to-r from-blue-500 to-purple-600 bg-clip-text text-transparent">
|
||
🏠 Family Hub
|
||
</h1>
|
||
<p className="text-xl text-gray-300 mb-8">
|
||
Home Management System
|
||
</p>
|
||
|
||
<div className="bg-gray-800 rounded-lg p-8 shadow-xl mb-8">
|
||
<h2 className="text-2xl font-semibold mb-4">Welcome!</h2>
|
||
<p className="text-gray-400 mb-6">
|
||
Family Hub is starting up. The backend API should be available at{' '}
|
||
<a
|
||
href="http://localhost:8000/docs"
|
||
className="text-blue-400 hover:text-blue-300 underline"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
>
|
||
http://localhost:8000/docs
|
||
</a>
|
||
</p>
|
||
|
||
<div className="mb-6">
|
||
<button
|
||
onClick={() => setCount((count) => count + 1)}
|
||
className="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors"
|
||
>
|
||
Count is {count}
|
||
</button>
|
||
</div>
|
||
|
||
<div className="text-left space-y-4 text-sm text-gray-400">
|
||
<div>
|
||
<h3 className="text-white font-semibold mb-2">✅ Phase 1 Complete:</h3>
|
||
<ul className="list-disc list-inside space-y-1 ml-4">
|
||
<li>Backend API with authentication</li>
|
||
<li>Database models for users, chores, meals</li>
|
||
<li>React frontend foundation</li>
|
||
<li>Docker setup</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div>
|
||
<h3 className="text-white font-semibold mb-2">🚧 Coming Next (Phase 2):</h3>
|
||
<ul className="list-disc list-inside space-y-1 ml-4">
|
||
<li>Chore management system</li>
|
||
<li>User login interface</li>
|
||
<li>Dashboard with today's tasks</li>
|
||
<li>Assignment and completion tracking</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
||
<div className="bg-gray-800 p-4 rounded-lg">
|
||
<h3 className="font-semibold mb-2">📅 Calendar</h3>
|
||
<p className="text-gray-400">Phase 3</p>
|
||
</div>
|
||
<div className="bg-gray-800 p-4 rounded-lg">
|
||
<h3 className="font-semibold mb-2">🍽️ Meals</h3>
|
||
<p className="text-gray-400">Phase 4</p>
|
||
</div>
|
||
<div className="bg-gray-800 p-4 rounded-lg">
|
||
<h3 className="font-semibold mb-2">🏡 Home Assistant</h3>
|
||
<p className="text-gray-400">Phase 6</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
export default App
|