feat: add trainer bio (experience, victories, education) across all layers

- Extend TeamMember type with experience/victories/education string arrays - Add DB columns with auto-migration for existing databases - Update API POST route to accept bio fields - Add ListField component for editing string arrays in admin - Add bio section (Опыт/Достижения/Образование) to team member admin form - Create TeamProfile component with full profile view (photo + bio sections) - Add "Подробнее" button to TeamMemberInfo that toggles to profile view Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-13 13:09:28 +03:00
parent ed90cd5924
commit 921d10800b
8 changed files with 282 additions and 14 deletions
--- a/src/app/admin/_components/FormField.tsx
+++ b/src/app/admin/_components/FormField.tsx
@@ -1,4 +1,5 @@
 import { useRef, useEffect, useState } from "react";
+import { Plus, X } from "lucide-react";

 interface InputFieldProps {
  label: string;
@@ -269,3 +270,72 @@ export function ToggleField({ label, checked, onChange }: ToggleFieldProps) {
    </label>
  );
 }
+
+interface ListFieldProps {
+  label: string;
+  items: string[];
+  onChange: (items: string[]) => void;
+  placeholder?: string;
+}
+
+export function ListField({ label, items, onChange, placeholder }: ListFieldProps) {
+  const [draft, setDraft] = useState("");
+
+  function add() {
+    const val = draft.trim();
+    if (!val) return;
+    onChange([...items, val]);
+    setDraft("");
+  }
+
+  function remove(index: number) {
+    onChange(items.filter((_, i) => i !== index));
+  }
+
+  function update(index: number, value: string) {
+    onChange(items.map((item, i) => (i === index ? value : item)));
+  }
+
+  return (
+    <div>
+      <label className="block text-sm text-neutral-400 mb-1.5">{label}</label>
+      <div className="space-y-2">
+        {items.map((item, i) => (
+          <div key={i} className="flex items-center gap-2">
+            <input
+              type="text"
+              value={item}
+              onChange={(e) => update(i, e.target.value)}
+              className="flex-1 rounded-lg border border-white/10 bg-neutral-800 px-4 py-2 text-sm text-white outline-none focus:border-gold transition-colors"
+            />
+            <button
+              type="button"
+              onClick={() => remove(i)}
+              className="shrink-0 rounded-lg p-2 text-neutral-500 hover:text-red-400 transition-colors"
+            >
+              <X size={14} />
+            </button>
+          </div>
+        ))}
+        <div className="flex items-center gap-2">
+          <input
+            type="text"
+            value={draft}
+            onChange={(e) => setDraft(e.target.value)}
+            onKeyDown={(e) => { if (e.key === "Enter") { e.preventDefault(); add(); } }}
+            placeholder={placeholder || "Добавить..."}
+            className="flex-1 rounded-lg border border-dashed border-white/10 bg-neutral-800/50 px-4 py-2 text-sm text-white placeholder-neutral-600 outline-none focus:border-gold/50 transition-colors"
+          />
+          <button
+            type="button"
+            onClick={add}
+            disabled={!draft.trim()}
+            className="shrink-0 rounded-lg p-2 text-neutral-500 hover:text-gold transition-colors disabled:opacity-30"
+          >
+            <Plus size={14} />
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
--- a/src/app/admin/team/[id]/page.tsx
+++ b/src/app/admin/team/[id]/page.tsx
@@ -4,7 +4,7 @@ import { useState, useEffect } from "react";
 import { useRouter, useParams } from "next/navigation";
 import Image from "next/image";
 import { Save, Loader2, Check, ArrowLeft, Upload } from "lucide-react";
-import { InputField, TextareaField } from "../../_components/FormField";
+import { InputField, TextareaField, ListField } from "../../_components/FormField";

 interface MemberForm {
  name: string;
@@ -12,6 +12,9 @@ interface MemberForm {
  image: string;
  instagram: string;
  description: string;
+  experience: string[];
+  victories: string[];
+  education: string[];
 }

 export default function TeamMemberEditorPage() {
@@ -25,6 +28,9 @@ export default function TeamMemberEditorPage() {
    image: "/images/team/placeholder.webp",
    instagram: "",
    description: "",
+    experience: [],
+    victories: [],
+    education: [],
  });
  const [loading, setLoading] = useState(!isNew);
  const [saving, setSaving] = useState(false);
@@ -42,6 +48,9 @@ export default function TeamMemberEditorPage() {
          image: member.image,
          instagram: member.instagram || "",
          description: member.description || "",
+          experience: member.experience || [],
+          victories: member.victories || [],
+          education: member.education || [],
        })
      )
      .finally(() => setLoading(false));
@@ -192,6 +201,30 @@ export default function TeamMemberEditorPage() {
            onChange={(v) => setData({ ...data, description: v })}
            rows={6}
          />
+
+          <div className="border-t border-white/5 pt-4 mt-4">
+            <p className="text-sm font-medium text-neutral-300 mb-4">Биография</p>
+            <div className="space-y-4">
+              <ListField
+                label="Опыт"
+                items={data.experience}
+                onChange={(items) => setData({ ...data, experience: items })}
+                placeholder="Например: 10 лет в танцах"
+              />
+              <ListField
+                label="Достижения"
+                items={data.victories}
+                onChange={(items) => setData({ ...data, victories: items })}
+                placeholder="Например: 1 место — чемпионат..."
+              />
+              <ListField
+                label="Образование"
+                items={data.education}
+                onChange={(items) => setData({ ...data, education: items })}
+                placeholder="Например: Сертификат IPSF"
+              />
+            </div>
+          </div>
        </div>
      </div>
    </div>
--- a/src/app/api/admin/team/route.ts
+++ b/src/app/api/admin/team/route.ts
@@ -14,6 +14,9 @@ export async function POST(request: NextRequest) {
    image: string;
    instagram?: string;
    description?: string;
+    experience?: string[];
+    victories?: string[];
+    education?: string[];
  };

  if (!data.name || !data.role || !data.image) {
--- a/src/components/sections/Team.tsx
+++ b/src/components/sections/Team.tsx
@@ -5,6 +5,7 @@ import { SectionHeading } from "@/components/ui/SectionHeading";
 import { Reveal } from "@/components/ui/Reveal";
 import { TeamCarousel } from "@/components/sections/team/TeamCarousel";
 import { TeamMemberInfo } from "@/components/sections/team/TeamMemberInfo";
+import { TeamProfile } from "@/components/sections/team/TeamProfile";
 import type { SiteContent } from "@/types/content";

 interface TeamProps {
@@ -13,6 +14,7 @@ interface TeamProps {

 export function Team({ data: team }: TeamProps) {
  const [activeIndex, setActiveIndex] = useState(0);
+  const [showProfile, setShowProfile] = useState(false);

  return (
    <section
@@ -37,6 +39,8 @@ export function Team({ data: team }: TeamProps) {

        <Reveal>
          <div className="mt-10">
+            {!showProfile ? (
+              <>
                <TeamCarousel
                  members={team.members}
                  activeIndex={activeIndex}
@@ -47,7 +51,15 @@ export function Team({ data: team }: TeamProps) {
                  members={team.members}
                  activeIndex={activeIndex}
                  onSelect={setActiveIndex}
+                  onOpenBio={() => setShowProfile(true)}
                />
+              </>
+            ) : (
+              <TeamProfile
+                member={team.members[activeIndex]}
+                onBack={() => setShowProfile(false)}
+              />
+            )}
          </div>
        </Reveal>
      </div>
--- a/src/components/sections/team/TeamMemberInfo.tsx
+++ b/src/components/sections/team/TeamMemberInfo.tsx
@@ -5,9 +5,10 @@ interface TeamMemberInfoProps {
  members: TeamMember[];
  activeIndex: number;
  onSelect: (index: number) => void;
+  onOpenBio: () => void;
 }

-export function TeamMemberInfo({ members, activeIndex, onSelect }: TeamMemberInfoProps) {
+export function TeamMemberInfo({ members, activeIndex, onSelect, onOpenBio }: TeamMemberInfoProps) {
  const member = members[activeIndex];

  return (
@@ -36,6 +37,13 @@ export function TeamMemberInfo({ members, activeIndex, onSelect }: TeamMemberInf
        </p>
      )}

+      <button
+        onClick={onOpenBio}
+        className="mt-3 text-sm font-medium text-gold hover:text-gold-light transition-colors cursor-pointer"
+      >
+        Подробнее →
+      </button>
+
      {/* Progress dots */}
      <div className="mt-6 flex items-center justify-center gap-1.5">
        {members.map((_, i) => (
--- a/src/components/sections/team/TeamProfile.tsx
+++ b/src/components/sections/team/TeamProfile.tsx
@@ -0,0 +1,109 @@
+import Image from "next/image";
+import { ArrowLeft, Instagram, Trophy, Award, GraduationCap } from "lucide-react";
+import type { TeamMember } from "@/types/content";
+
+interface TeamProfileProps {
+  member: TeamMember;
+  onBack: () => void;
+}
+
+const BIO_SECTIONS = [
+  { key: "experience" as const, label: "Опыт", icon: Trophy },
+  { key: "victories" as const, label: "Достижения", icon: Award },
+  { key: "education" as const, label: "Образование", icon: GraduationCap },
+];
+
+export function TeamProfile({ member, onBack }: TeamProfileProps) {
+  const hasBio = BIO_SECTIONS.some(
+    (s) => member[s.key] && member[s.key]!.length > 0
+  );
+
+  return (
+    <div
+      className="mx-auto max-w-3xl"
+      style={{ animation: "team-info-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)" }}
+    >
+      {/* Back button */}
+      <button
+        onClick={onBack}
+        className="mb-6 inline-flex items-center gap-1.5 text-sm text-white/40 transition-colors hover:text-gold-light cursor-pointer"
+      >
+        <ArrowLeft size={16} />
+        Назад
+      </button>
+
+      {/* Main: photo + info */}
+      <div className="flex flex-col items-center gap-8 sm:flex-row sm:items-start">
+        {/* Photo */}
+        <div className="relative w-full max-w-[260px] shrink-0 aspect-[3/4] overflow-hidden rounded-2xl border border-white/[0.06]">
+          <Image
+            src={member.image}
+            alt={member.name}
+            fill
+            sizes="260px"
+            className="object-cover"
+          />
+        </div>
+
+        {/* Info */}
+        <div className="text-center sm:text-left">
+          <h3 className="text-2xl font-bold text-white">{member.name}</h3>
+          <p className="mt-1 text-sm font-medium text-gold-light">
+            {member.role}
+          </p>
+
+          {member.instagram && (
+            <a
+              href={member.instagram}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="mt-3 inline-flex items-center gap-1.5 text-sm text-white/40 transition-colors hover:text-gold-light"
+            >
+              <Instagram size={14} />
+              {member.instagram.split("/").filter(Boolean).pop()}
+            </a>
+          )}
+
+          {member.description && (
+            <p className="mt-4 text-sm leading-relaxed text-white/55">
+              {member.description}
+            </p>
+          )}
+        </div>
+      </div>
+
+      {/* Bio sections */}
+      {hasBio && (
+        <div className="mt-8 grid grid-cols-1 gap-6 sm:grid-cols-3">
+          {BIO_SECTIONS.map((section) => {
+            const items = member[section.key];
+            if (!items || items.length === 0) return null;
+            const Icon = section.icon;
+
+            return (
+              <div key={section.key}>
+                <div className="flex items-center gap-2 text-gold">
+                  <Icon size={16} />
+                  <span className="text-xs font-semibold uppercase tracking-wider">
+                    {section.label}
+                  </span>
+                </div>
+                <ul className="mt-3 space-y-2">
+                  {items.map((item, i) => (
+                    <li
+                      key={i}
+                      className="flex items-start gap-2 text-sm text-white/60"
+                    >
+                      <span className="mt-1.5 h-1 w-1 shrink-0 rounded-full bg-gold/50" />
+                      {item}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            );
+          })}
+        </div>
+      )}
+    </div>
+  );
+}
--- a/src/lib/db.ts
+++ b/src/lib/db.ts
@@ -33,11 +33,21 @@ function initTables(db: Database.Database) {
      image TEXT NOT NULL,
      instagram TEXT,
      description TEXT,
+      experience TEXT,
+      victories TEXT,
+      education TEXT,
      sort_order INTEGER NOT NULL DEFAULT 0,
      created_at TEXT DEFAULT (datetime('now')),
      updated_at TEXT DEFAULT (datetime('now'))
    );
  `);
+
+  // Migrate: add bio columns if missing
+  const cols = db.prepare("PRAGMA table_info(team_members)").all() as { name: string }[];
+  const colNames = new Set(cols.map((c) => c.name));
+  if (!colNames.has("experience")) db.exec("ALTER TABLE team_members ADD COLUMN experience TEXT");
+  if (!colNames.has("victories")) db.exec("ALTER TABLE team_members ADD COLUMN victories TEXT");
+  if (!colNames.has("education")) db.exec("ALTER TABLE team_members ADD COLUMN education TEXT");
 }

 // --- Sections ---
@@ -67,9 +77,17 @@ interface TeamMemberRow {
  image: string;
  instagram: string | null;
  description: string | null;
+  experience: string | null;
+  victories: string | null;
+  education: string | null;
  sort_order: number;
 }

+function parseJsonArray(val: string | null): string[] | undefined {
+  if (!val) return undefined;
+  try { const arr = JSON.parse(val); return Array.isArray(arr) && arr.length > 0 ? arr : undefined; } catch { return undefined; }
+}
+
 export function getTeamMembers(): (TeamMember & { id: number })[] {
  const db = getDb();
  const rows = db
@@ -82,6 +100,9 @@ export function getTeamMembers(): (TeamMember & { id: number })[] {
    image: r.image,
    instagram: r.instagram ?? undefined,
    description: r.description ?? undefined,
+    experience: parseJsonArray(r.experience),
+    victories: parseJsonArray(r.victories),
+    education: parseJsonArray(r.education),
  }));
 }

@@ -100,6 +121,9 @@ export function getTeamMember(
    image: r.image,
    instagram: r.instagram ?? undefined,
    description: r.description ?? undefined,
+    experience: parseJsonArray(r.experience),
+    victories: parseJsonArray(r.victories),
+    education: parseJsonArray(r.education),
  };
 }

@@ -112,8 +136,8 @@ export function createTeamMember(
    .get() as { max: number };
  const result = db
    .prepare(
-      `INSERT INTO team_members (name, role, image, instagram, description, sort_order)
-       VALUES (?, ?, ?, ?, ?, ?)`
+      `INSERT INTO team_members (name, role, image, instagram, description, experience, victories, education, sort_order)
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?)`
    )
    .run(
      data.name,
@@ -121,6 +145,9 @@ export function createTeamMember(
      data.image,
      data.instagram ?? null,
      data.description ?? null,
+      data.experience?.length ? JSON.stringify(data.experience) : null,
+      data.victories?.length ? JSON.stringify(data.victories) : null,
+      data.education?.length ? JSON.stringify(data.education) : null,
      maxOrder.max + 1
    );
  return result.lastInsertRowid as number;
@@ -139,6 +166,9 @@ export function updateTeamMember(
  if (data.image !== undefined) { fields.push("image = ?"); values.push(data.image); }
  if (data.instagram !== undefined) { fields.push("instagram = ?"); values.push(data.instagram || null); }
  if (data.description !== undefined) { fields.push("description = ?"); values.push(data.description || null); }
+  if (data.experience !== undefined) { fields.push("experience = ?"); values.push(data.experience?.length ? JSON.stringify(data.experience) : null); }
+  if (data.victories !== undefined) { fields.push("victories = ?"); values.push(data.victories?.length ? JSON.stringify(data.victories) : null); }
+  if (data.education !== undefined) { fields.push("education = ?"); values.push(data.education?.length ? JSON.stringify(data.education) : null); }

  if (fields.length === 0) return;
  fields.push("updated_at = datetime('now')");
--- a/src/types/content.ts
+++ b/src/types/content.ts
@@ -13,6 +13,9 @@ export interface TeamMember {
  image: string;
  instagram?: string;
  description?: string;
+  experience?: string[];
+  victories?: string[];
+  education?: string[];
 }

 export interface FAQItem {