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>
This commit is contained in:
@@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user