feat: frontend setup — React, TypeScript, Tailwind, auth, layout, routing
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,37 @@
|
||||
import { Link, Outlet } from 'react-router-dom'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useAuth } from '../hooks/useAuth'
|
||||
import api from '../api/client'
|
||||
import type { StorageInfo } from '../types'
|
||||
|
||||
export default function Layout() {
|
||||
const { user, logout } = useAuth()
|
||||
const { data: storage } = useQuery<StorageInfo>({
|
||||
queryKey: ['storage'],
|
||||
queryFn: () => api.get('/settings/storage').then((r) => r.data),
|
||||
})
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50">
|
||||
<nav className="bg-gray-900 text-white px-6 py-3 flex items-center justify-between">
|
||||
<div className="flex items-center gap-6">
|
||||
<Link to="/" className="text-blue-400 font-bold text-lg">MeetingProto</Link>
|
||||
<Link to="/recordings" className="hover:text-blue-300">Записи</Link>
|
||||
<Link to="/protocols" className="hover:text-blue-300">Протоколы</Link>
|
||||
<Link to="/templates" className="hover:text-blue-300">Шаблоны</Link>
|
||||
<Link to="/settings" className="text-gray-400 hover:text-blue-300">Настройки</Link>
|
||||
</div>
|
||||
<div className="flex items-center gap-4 text-sm">
|
||||
{storage && (
|
||||
<span className="text-gray-400">Занято: {storage.total_gb} ГБ</span>
|
||||
)}
|
||||
<span>{user?.username}</span>
|
||||
<button onClick={logout} className="text-gray-400 hover:text-white">Выйти</button>
|
||||
</div>
|
||||
</nav>
|
||||
<main className="max-w-7xl mx-auto px-6 py-8">
|
||||
<Outlet />
|
||||
</main>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user