create a frontend with a main menu

2026-09-21 21:45:20 +03:00
parent e1c4a5b9ba
commit 30cf8c7215
13 changed files with 2586 additions and 0 deletions
@@ -0,0 +1,37 @@
+import { useState } from 'react'
+import { useAuth } from '../auth'
+import AuthModal from './AuthModal'
+
+export default function ProfileBar() {
+  const { user, loading, logout } = useAuth()
+  const [showAuth, setShowAuth] = useState(false)
+
+  return (
+    <>
+      <div className="profile-bar">
+        {loading ? (
+          <span className="profile-loading">Загрузка…</span>
+        ) : user ? (
+          <div className="profile-user">
+            {user.avatar_url ? (
+              <img src={user.avatar_url} alt={user.nickname} className="profile-avatar" />
+            ) : (
+              <div className="profile-avatar profile-avatar-placeholder">
+                {user.nickname[0]?.toUpperCase()}
+              </div>
+            )}
+            <span className="profile-name">{user.nickname}</span>
+            <button className="link-button" onClick={logout}>
+              Выйти
+            </button>
+          </div>
+        ) : (
+          <button className="btn btn-primary" onClick={() => setShowAuth(true)}>
+            Войти
+          </button>
+        )}
+      </div>
+      {showAuth && <AuthModal onClose={() => setShowAuth(false)} />}
+    </>
+  )
+}