feat: add class modal with descriptions, photos and remove email from contacts

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-09 22:41:58 +03:00
parent 86a04bb8c0
commit 1f6e314af6
17 changed files with 229 additions and 12 deletions
--- a/src/components/ui/ClassModal.tsx
+++ b/src/components/ui/ClassModal.tsx
@@ -0,0 +1,94 @@
+"use client";
+
+import { useEffect } from "react";
+import Image from "next/image";
+import { X, Flame, Sparkles, Wind, Zap, Star, Monitor } from "lucide-react";
+import type { ClassItem } from "@/types";
+
+const iconMap: Record<string, React.ReactNode> = {
+  flame: <Flame size={40} />,
+  sparkles: <Sparkles size={40} />,
+  wind: <Wind size={40} />,
+  zap: <Zap size={40} />,
+  star: <Star size={40} />,
+  monitor: <Monitor size={40} />,
+};
+
+interface ClassModalProps {
+  classItem: ClassItem | null;
+  onClose: () => void;
+}
+
+export function ClassModal({ classItem, onClose }: ClassModalProps) {
+  useEffect(() => {
+    if (!classItem) 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);
+    };
+  }, [classItem, onClose]);
+
+  if (!classItem) 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="overflow-y-auto p-6">
+          <div className="flex items-center gap-4">
+            <div className="heading-text shrink-0">{iconMap[classItem.icon]}</div>
+            <h3 className="heading-text text-xl font-semibold">
+              {classItem.name}
+            </h3>
+          </div>
+
+          {classItem.detailedDescription && (
+            <div className="body-text mt-4 text-sm leading-relaxed whitespace-pre-line">
+              {classItem.detailedDescription}
+            </div>
+          )}
+
+          {classItem.images && classItem.images.length > 0 && (
+            <div className={`mt-6 flex gap-3 pb-2 ${classItem.images.length === 1 ? "justify-center" : "overflow-x-auto"}`}>
+              {classItem.images.map((src, i) => (
+                <div
+                  key={i}
+                  className="h-48 w-72 shrink-0 overflow-hidden rounded-xl"
+                >
+                  <Image
+                    src={src}
+                    alt={`${classItem.name} ${i + 1}`}
+                    width={288}
+                    height={192}
+                    className="h-full w-full object-cover"
+                  />
+                </div>
+              ))}
+            </div>
+          )}
+        </div>
+      </div>
+    </div>
+  );
+}