init commit

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

@@ -0,0 +1,80 @@
+// src/components/ProfileCard.tsx
+'use client'
+
+import Image from 'next/image'
+import { format } from 'date-fns'
+import ru from 'date-fns/locale/ru'
+
+interface ProfileCardProps {
+  avatar: string       // API теперь отдаёт что-то вроде "frontend/assets/img/avatars/3.png"
+  full_name: string
+  email: string
+  bio?: string
+  last_login: string
+  date_joined: string
+}
+
+export function ProfileCard({
+  avatar,
+  full_name,
+  email,
+  bio,
+  last_login,
+  date_joined,
+}: ProfileCardProps) {
+  // Если API отдаёт относительный путь без /media/, добавляем префикс:
+  const avatarSrc = avatar.startsWith('http')
+    ? avatar
+    : `${process.env.NEXT_PUBLIC_API_URL}/media/${avatar}`
+
+  const fmt = (iso: string) => {
+    try {
+      return format(new Date(iso), 'dd.MM.yyyy HH:mm', { locale: ru })
+    } catch {
+      return iso
+    }
+  }
+
+  return (
+    <div
+      className="card shadow rounded mx-auto my-4"
+      style={{ maxWidth: 600 }}
+    >
+      <div className="card-body text-center">
+        {/* Avatar */}
+        <div className="mb-3">
+          <Image
+            className="rounded-circle border border-white"
+            src={avatarSrc}
+            alt="Avatar"
+            width={150}
+            height={150}
+          />
+        </div>
+
+        {/* Full Name */}
+        <h3 className="mb-1">{full_name || '—'}</h3>
+
+        {/* Email */}
+        <p className="text-muted mb-3">{email}</p>
+
+        {/* Bio */}
+        <p className="mb-4">
+          {bio && bio.trim() ? bio : 'Описание профиля отсутствует.'}
+        </p>
+
+        {/* Даты регистрации и последнего входа */}
+        <div className="d-flex justify-content-around">
+          <div className="text-start">
+            <p className="mb-1 small text-uppercase">Зарегистрирован</p>
+            <p className="mb-0">{fmt(date_joined)}</p>
+          </div>
+          <div className="text-end">
+            <p className="mb-1 small text-uppercase">Последний вход</p>
+            <p className="mb-0">{fmt(last_login)}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,31 @@
+import Link from 'next/link'
+
+export function Footer() {
+  return (
+    <footer className="bg-light footer py-5 border-top">
+      <div className="container">
+        <div className="row">
+          <div className="col-lg-6 text-center text-lg-start mb-3 mb-lg-0">
+            <ul className="list-inline mb-2">
+              <li className="list-inline-item"><Link href="#">About</Link></li>
+              <li className="list-inline-item"><span>⋅</span></li>
+              <li className="list-inline-item"><Link href="#">Contact</Link></li>
+              <li className="list-inline-item"><span>⋅</span></li>
+              <li className="list-inline-item"><Link href="#">Terms of Use</Link></li>
+              <li className="list-inline-item"><span>⋅</span></li>
+              <li className="list-inline-item"><Link href="#">Privacy Policy</Link></li>
+            </ul>
+            <p className="text-muted small mb-0">© CatLink 2025. Все права защищены.</p>
+          </div>
+          <div className="col-lg-6 text-center text-lg-end">
+            <ul className="list-inline mb-0">
+              <li className="list-inline-item"><Link href="#"><i className="fa fa-facebook fa-2x fa-fw" /></Link></li>
+              <li className="list-inline-item"><Link href="#"><i className="fa fa-twitter fa-2x fa-fw" /></Link></li>
+              <li className="list-inline-item"><Link href="#"><i className="fa fa-instagram fa-2x fa-fw" /></Link></li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </footer>
+  )
+}

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>
+  )
+}