feat: upgrade team admin with click-to-edit, Instagram validation, date picker, city autocomplete
- Team list: click card to open editor (remove pencil button), keep drag-to-reorder - Instagram field: username-only input with @ prefix, async account validation via HEAD request - Victory dates: date range picker replacing text input, auto-formats to DD.MM.YYYY / DD-DD.MM.YYYY - Victory location: city autocomplete via Nominatim API with suggestions dropdown - Links: real-time URL validation with error indicators on all link fields - Save button blocked when any validation errors exist Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
@@ -20,7 +20,7 @@ export function TeamProfile({ member, onBack }: TeamProfileProps) {
|
||||
className="w-full"
|
||||
style={{ animation: "team-info-in 0.6s cubic-bezier(0.16, 1, 0.3, 1)" }}
|
||||
>
|
||||
{/* Back button — above card */}
|
||||
{/* 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"
|
||||
@@ -29,109 +29,121 @@ export function TeamProfile({ member, onBack }: TeamProfileProps) {
|
||||
Назад
|
||||
</button>
|
||||
|
||||
{/* Two-column layout */}
|
||||
<div className="flex flex-col gap-8 sm:flex-row sm:items-start">
|
||||
{/* Photo with name overlay */}
|
||||
<div className="relative shrink-0 w-full sm:w-[380px] aspect-[3/4] overflow-hidden rounded-xl border border-white/[0.06]">
|
||||
<Image
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
fill
|
||||
sizes="(min-width: 640px) 380px, 100vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
{/* Gradient overlay for text readability */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/60 via-transparent to-transparent" />
|
||||
{/* Magazine editorial layout */}
|
||||
<div className="relative mx-auto max-w-4xl flex flex-col sm:flex-row sm:items-start">
|
||||
{/* Photo — left column, sticky */}
|
||||
<div className="relative shrink-0 w-full sm:w-[340px] lg:w-[380px] sm:sticky sm:top-8">
|
||||
<div className="relative aspect-[3/4] overflow-hidden rounded-2xl border border-white/[0.06]">
|
||||
<Image
|
||||
src={member.image}
|
||||
alt={member.name}
|
||||
fill
|
||||
sizes="(min-width: 1024px) 380px, (min-width: 640px) 340px, 100vw"
|
||||
className="object-cover"
|
||||
/>
|
||||
{/* Top gradient for name */}
|
||||
<div className="absolute inset-0 bg-gradient-to-b from-black/70 via-transparent to-transparent" />
|
||||
{/* Bottom gradient for mobile bio peek */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/40 via-transparent to-transparent sm:hidden" />
|
||||
|
||||
{/* Name + role + instagram overlay */}
|
||||
<div className="absolute top-0 left-0 right-0 p-6">
|
||||
<h3
|
||||
className="text-3xl sm:text-4xl font-bold text-white leading-tight"
|
||||
style={{ textShadow: "0 2px 20px rgba(0,0,0,0.5)" }}
|
||||
>
|
||||
{member.name}
|
||||
</h3>
|
||||
<p
|
||||
className="mt-1 text-sm font-medium text-gold-light"
|
||||
style={{ textShadow: "0 1px 10px rgba(0,0,0,0.5)" }}
|
||||
>
|
||||
{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/70 transition-colors hover:text-gold-light"
|
||||
style={{ textShadow: "0 1px 8px rgba(0,0,0,0.5)" }}
|
||||
{/* Name + role overlay at top */}
|
||||
<div className="absolute top-0 left-0 right-0 p-6 sm:p-8">
|
||||
<h3
|
||||
className="text-3xl sm:text-4xl font-bold text-white leading-tight"
|
||||
style={{ textShadow: "0 2px 24px rgba(0,0,0,0.6)" }}
|
||||
>
|
||||
<Instagram size={14} />
|
||||
{member.instagram.split("/").filter(Boolean).pop()}
|
||||
</a>
|
||||
)}
|
||||
{member.name}
|
||||
</h3>
|
||||
<p
|
||||
className="mt-1.5 text-sm sm:text-base font-medium text-gold-light"
|
||||
style={{ textShadow: "0 1px 12px rgba(0,0,0,0.5)" }}
|
||||
>
|
||||
{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/70 transition-colors hover:text-gold-light"
|
||||
style={{ textShadow: "0 1px 8px rgba(0,0,0,0.5)" }}
|
||||
>
|
||||
<Instagram size={14} />
|
||||
{member.instagram.split("/").filter(Boolean).pop()}
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right column — bio content */}
|
||||
<div className="flex-1 min-w-0">
|
||||
{/* Victories as structured card grid */}
|
||||
{hasVictories && (
|
||||
<div>
|
||||
<span className="inline-block rounded-full border border-white/15 px-4 py-1.5 text-sm font-medium text-white">
|
||||
Достижения:
|
||||
</span>
|
||||
<div className="mt-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{member.victories!.map((item, i) => (
|
||||
<VictoryCard key={i} victory={item} onImageClick={setLightbox} />
|
||||
))}
|
||||
{/* Bio panel — overlaps photo edge on desktop */}
|
||||
<div className="relative sm:-ml-12 sm:mt-8 mt-0 flex-1 min-w-0 z-10">
|
||||
<div className="rounded-2xl border border-white/[0.08] bg-black/60 backdrop-blur-xl p-5 sm:p-6 shadow-2xl shadow-black/40">
|
||||
{/* Victories */}
|
||||
{hasVictories && (
|
||||
<div>
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-gold/20 bg-gold/5 px-4 py-1.5 text-sm font-medium text-gold">
|
||||
<Trophy size={14} />
|
||||
Достижения
|
||||
</span>
|
||||
<div className="mt-4 flex flex-col sm:flex-row sm:flex-wrap gap-2.5">
|
||||
{member.victories!.map((item, i) => (
|
||||
<VictoryCard key={i} victory={item} onImageClick={setLightbox} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* Education as card grid */}
|
||||
{hasEducation && (
|
||||
<div className={hasVictories ? "mt-8" : ""}>
|
||||
<span className="inline-block rounded-full border border-white/15 px-4 py-1.5 text-sm font-medium text-white">
|
||||
<GraduationCap size={14} className="inline -mt-0.5 mr-1.5" />
|
||||
Образование:
|
||||
</span>
|
||||
<div className="mt-4 grid grid-cols-2 lg:grid-cols-3 gap-3">
|
||||
{member.education!.map((item, i) => (
|
||||
<RichCard key={i} item={item} onImageClick={setLightbox} />
|
||||
))}
|
||||
{/* Education */}
|
||||
{hasEducation && (
|
||||
<div className={hasVictories ? "mt-8" : ""}>
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-gold/20 bg-gold/5 px-4 py-1.5 text-sm font-medium text-gold">
|
||||
<GraduationCap size={14} />
|
||||
Образование
|
||||
</span>
|
||||
<div className="mt-4 space-y-2">
|
||||
{member.education!.map((item, i) => (
|
||||
<RichCard key={i} item={item} onImageClick={setLightbox} />
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* Experience as text list */}
|
||||
{hasExperience && (
|
||||
<div className={hasVictories || hasEducation ? "mt-8" : ""}>
|
||||
<div className="flex items-center gap-2 text-gold mb-3">
|
||||
<Trophy size={15} />
|
||||
<span className="text-xs font-semibold uppercase tracking-wider">
|
||||
{/* Experience */}
|
||||
{hasExperience && (
|
||||
<div className={hasVictories || hasEducation ? "mt-8" : ""}>
|
||||
<span className="inline-flex items-center gap-1.5 rounded-full border border-gold/20 bg-gold/5 px-4 py-1.5 text-sm font-medium text-gold">
|
||||
<Trophy size={15} />
|
||||
Опыт
|
||||
</span>
|
||||
<ul className="mt-4 space-y-2.5">
|
||||
{member.experience!.map((item, i) => (
|
||||
<li
|
||||
key={i}
|
||||
className="flex items-start gap-2.5 text-sm text-white/60"
|
||||
>
|
||||
<span className="mt-1.5 h-1.5 w-1.5 shrink-0 rounded-full bg-gold/40" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
<ul className="space-y-2">
|
||||
{member.experience!.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>
|
||||
)}
|
||||
)}
|
||||
|
||||
{/* Description */}
|
||||
{member.description && (
|
||||
<p className={`text-sm leading-relaxed text-white/50 ${hasBio ? "mt-8 border-t border-white/[0.06] pt-6" : ""}`}>
|
||||
{member.description}
|
||||
</p>
|
||||
)}
|
||||
{/* Description */}
|
||||
{member.description && (
|
||||
<p className={`text-sm leading-relaxed text-white/45 ${hasBio ? "mt-8 border-t border-white/[0.06] pt-6" : ""}`}>
|
||||
{member.description}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Empty state */}
|
||||
{!hasBio && !member.description && (
|
||||
<p className="text-sm text-white/30 italic">
|
||||
Информация скоро появится
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -168,57 +180,26 @@ function VictoryCard({ victory, onImageClick }: { victory: VictoryItem; onImageC
|
||||
|
||||
if (hasImage) {
|
||||
return (
|
||||
<div className="group rounded-lg border border-white/[0.06] overflow-hidden">
|
||||
<div className="group w-full sm:w-44 shrink-0 rounded-xl border border-white/[0.08] overflow-hidden">
|
||||
<button
|
||||
onClick={() => onImageClick(victory.image!)}
|
||||
className="relative w-full aspect-[3/4] overflow-hidden cursor-pointer"
|
||||
className="relative w-full aspect-square overflow-hidden cursor-pointer"
|
||||
>
|
||||
<Image
|
||||
src={victory.image!}
|
||||
alt={victory.competition}
|
||||
fill
|
||||
sizes="(min-width: 640px) 200px, 45vw"
|
||||
sizes="176px"
|
||||
className="object-cover transition-transform group-hover:scale-105"
|
||||
/>
|
||||
{/* Gradient overlay at bottom */}
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
|
||||
{/* Text overlay at bottom */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-3 space-y-0.5">
|
||||
<div className="absolute bottom-0 left-0 right-0 bg-black/80 backdrop-blur-sm p-2.5 space-y-0.5">
|
||||
{victory.place && (
|
||||
<p className="text-lg font-bold text-gold" style={{ textShadow: "0 1px 8px rgba(0,0,0,0.5)" }}>{victory.place}</p>
|
||||
<p className="text-sm font-bold text-gold">{victory.place}</p>
|
||||
)}
|
||||
{victory.category && (
|
||||
<p className="text-xs font-medium uppercase tracking-wider text-white/90" style={{ textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{victory.category}</p>
|
||||
)}
|
||||
<p className="text-sm text-white/70" style={{ textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{victory.competition}</p>
|
||||
{(victory.location || victory.date) && (
|
||||
<div className="flex flex-wrap items-center gap-x-3 gap-y-0.5 pt-0.5">
|
||||
{victory.location && (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-white/50">
|
||||
<MapPin size={10} />
|
||||
{victory.location}
|
||||
</span>
|
||||
)}
|
||||
{victory.date && (
|
||||
<span className="inline-flex items-center gap-1 text-xs text-white/50">
|
||||
<Calendar size={10} />
|
||||
{victory.date}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{hasLink && (
|
||||
<a
|
||||
href={victory.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="mt-1 inline-flex items-center gap-1 text-xs text-gold/80 hover:text-gold transition-colors"
|
||||
>
|
||||
<ExternalLink size={11} />
|
||||
Подробнее
|
||||
</a>
|
||||
<p className="text-[10px] font-semibold uppercase tracking-wider text-white">{victory.category}</p>
|
||||
)}
|
||||
<p className="text-xs text-white/80">{victory.competition}</p>
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
@@ -226,8 +207,8 @@ function VictoryCard({ victory, onImageClick }: { victory: VictoryItem; onImageC
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="group rounded-lg border border-white/[0.06] overflow-hidden">
|
||||
<div className="p-3 space-y-1">
|
||||
<div className="group w-full sm:w-56 shrink-0 rounded-xl border border-white/[0.08] overflow-hidden bg-white/[0.03]">
|
||||
<div className="p-2.5 space-y-0.5">
|
||||
{victory.place && (
|
||||
<p className="text-lg font-bold text-gold">{victory.place}</p>
|
||||
)}
|
||||
@@ -273,41 +254,39 @@ function RichCard({ item, onImageClick }: { item: RichListItem; onImageClick: (s
|
||||
|
||||
if (hasImage) {
|
||||
return (
|
||||
<div className="group rounded-lg border border-white/[0.06] overflow-hidden">
|
||||
<div className="group flex rounded-xl border border-white/[0.08] overflow-hidden bg-white/[0.03]">
|
||||
<button
|
||||
onClick={() => onImageClick(item.image!)}
|
||||
className="relative w-full aspect-[3/4] overflow-hidden cursor-pointer"
|
||||
className="relative w-16 shrink-0 overflow-hidden cursor-pointer"
|
||||
>
|
||||
<Image
|
||||
src={item.image!}
|
||||
alt={item.text}
|
||||
fill
|
||||
sizes="(min-width: 1024px) 200px, (min-width: 640px) 160px, 45vw"
|
||||
sizes="64px"
|
||||
className="object-cover transition-transform group-hover:scale-105"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-black/80 via-black/20 to-transparent" />
|
||||
<div className="absolute bottom-0 left-0 right-0 p-3">
|
||||
<p className="text-sm text-white/80" style={{ textShadow: "0 1px 6px rgba(0,0,0,0.5)" }}>{item.text}</p>
|
||||
{hasLink && (
|
||||
<a
|
||||
href={item.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="mt-1 inline-flex items-center gap-1 text-xs text-gold/80 hover:text-gold transition-colors"
|
||||
>
|
||||
<ExternalLink size={11} />
|
||||
Подробнее
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
<div className="flex-1 min-w-0 p-2.5">
|
||||
<p className="text-xs text-white/70">{item.text}</p>
|
||||
{hasLink && (
|
||||
<a
|
||||
href={item.link}
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
className="mt-1 inline-flex items-center gap-1 text-xs text-gold/70 hover:text-gold transition-colors"
|
||||
>
|
||||
<ExternalLink size={11} />
|
||||
Подробнее
|
||||
</a>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="group rounded-lg border border-white/[0.06] overflow-hidden">
|
||||
<div className="group rounded-xl border border-white/[0.08] overflow-hidden bg-white/[0.03]">
|
||||
<div className="p-3">
|
||||
<p className="text-sm text-white/60">{item.text}</p>
|
||||
{hasLink && (
|
||||
|
||||
Reference in New Issue
Block a user