feat: add team member modal with descriptions

Click on a team card to see a popup with larger photo, Instagram link, and personal description. All 13 team members now have descriptions. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 22:20:29 +03:00
parent dcb31415bc
commit 86a04bb8c0
5 changed files with 178 additions and 9 deletions
--- a/src/components/ui/TeamMemberModal.tsx
+++ b/src/components/ui/TeamMemberModal.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useEffect } from "react";
+import Image from "next/image";
+import { X, Instagram } from "lucide-react";
+import type { TeamMember } from "@/types";
+
+interface TeamMemberModalProps {
+  member: TeamMember | null;
+  onClose: () => void;
+}
+
+export function TeamMemberModal({ member, onClose }: TeamMemberModalProps) {
+  useEffect(() => {
+    if (!member) return;
+
+    document.body.style.overflow = "hidden";
+
+    function handleKeyDown(e: KeyboardEvent) {
+      if (e.key === "Escape") onClose();
+    }
+
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.body.style.overflow = "";
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [member, onClose]);
+
+  if (!member) return null;
+
+  return (
+    <div
+      className="modal-overlay fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm p-4"
+      onClick={onClose}
+    >
+      <div
+        className="modal-content surface-base relative w-full max-w-md md:max-w-2xl max-h-[85vh] flex flex-col rounded-2xl shadow-xl"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <button
+          onClick={onClose}
+          className="heading-text absolute right-4 top-4 z-10 rounded-full p-1 transition-opacity hover:opacity-70"
+          aria-label="Закрыть"
+        >
+          <X size={20} />
+        </button>
+
+        <div className="flex flex-col md:flex-row overflow-y-auto p-6 gap-6">
+          <div className="flex flex-col items-center md:items-start shrink-0">
+            <div className="h-40 w-40 md:h-48 md:w-48 overflow-hidden rounded-full ring-2 ring-rose-500/30">
+              <Image
+                src={member.image}
+                alt={member.name}
+                width={192}
+                height={192}
+                className="h-full w-full object-cover"
+              />
+            </div>
+
+            <h3 className="heading-text mt-4 text-xl font-semibold text-center md:text-left w-full">
+              {member.name}
+            </h3>
+
+            {member.instagram && (
+              <a
+                href={member.instagram}
+                target="_blank"
+                rel="noopener noreferrer"
+                className="nav-link mt-1 inline-flex gap-1.5 text-sm"
+              >
+                <Instagram size={14} className="shrink-0 mt-[3px]" />
+                <span>{member.instagram.split("/").filter(Boolean).pop()}</span>
+              </a>
+            )}
+          </div>
+
+          {member.description && (
+            <div className="md:border-l md:theme-border md:pl-6 flex items-center">
+              <p className="body-text text-sm leading-relaxed">
+                {member.description}
+              </p>
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}