init commit

frontend/linktree-frontend/src/app/components/header.tsx

@@ -0,0 +1,72 @@
+'use client'
+import { useEffect, useState } from 'react'
+import { useRouter } from 'next/navigation'
+import Link from 'next/link'
+import Image from 'next/image'
+
+interface UserProfile {
+  username: string
+  first_name?: string
+  avatarUrl?: string
+}
+
+export function Header() {
+  const [user, setUser] = useState<UserProfile | null>(null)
+  const router = useRouter()
+  useEffect(() => {
+    const token = localStorage.getItem('token')
+    if (!token) {
+      return
+    }
+    fetch('/api/auth/user/', {
+      headers: { Authorization: `Bearer ${token}` },
+    })
+      .then(res => {
+        if (!res.ok) throw new Error('unauth')
+        return res.json()
+      })
+      .then(setUser)
+      .catch(() => {
+        localStorage.removeItem('token')
+        router.push('/auth/login')
+      })
+  }, [router])
+
+  const logout = () => {
+    localStorage.removeItem('token')
+    router.push('/')
+  }
+
+  return (
+    <nav className="navbar navbar-expand bg-light fixed-top">
+      <div className="container">
+        <Link href="/" className="navbar-brand">
+          <Image src="/assets/img/CAT.png" width={89} height={89} alt="CatLink"/>
+        </Link>
+        <div className="collapse navbar-collapse">
+          {user ? (
+            <div className="ms-auto d-flex align-items-center">
+              <Link href="/dashboard" className="me-3 d-flex align-items-center">
+                <Image
+                  src={user.avatarUrl || '/assets/img/avatar-dhg.png'}
+                  width={32}
+                  height={32}
+                  className="rounded-circle"
+                  alt="avatar"
+                />
+                <span className="ms-2">{user.first_name || user.username}</span>
+              </Link>
+              <button className="btn btn-outline-danger" onClick={logout}>
+                Выход
+              </button>
+            </div>
+          ) : (
+            <Link href="/auth/login" className="btn btn-primary ms-auto">
+              Вход
+            </Link>
+          )}
+        </div>
+      </div>
+    </nav>
+  )
+}