feat: contact admin — phone mask, Instagram validation, compact addresses, remove map URL

src/app/admin/contact/page.tsx

@@ -1,54 +1,240 @@
 "use client";
 
+import { useState } from "react";
+import { ChevronDown, Plus, X, AlertCircle, Check } from "lucide-react";
 import { SectionEditor } from "../_components/SectionEditor";
-import { InputField, TextareaField } from "../_components/FormField";
+import { InputField } from "../_components/FormField";
-import { ArrayEditor } from "../_components/ArrayEditor";
 import type { ContactInfo } from "@/types/content";
 
+// --- Phone input with mask ---
+function PhoneField({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  function formatPhone(raw: string): string {
+    const digits = raw.replace(/\D/g, "").slice(0, 12);
+    if (digits.length === 0) return "+375 ";
+    let result = "+";
+    for (let i = 0; i < digits.length; i++) {
+      if (i === 3) result += " (";
+      if (i === 5) result += ") ";
+      if (i === 8) result += "-";
+      if (i === 10) result += "-";
+      result += digits[i];
+    }
+    return result;
+  }
+
+  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
+    const formatted = formatPhone(e.target.value);
+    onChange(formatted);
+  }
+
+  const digits = value.replace(/\D/g, "");
+  const isComplete = digits.length === 12;
+
+  return (
+    <div>
+      <label className="block text-sm text-neutral-400 mb-1.5">Телефон</label>
+      <div className="relative">
+        <input
+          type="tel"
+          value={value}
+          onChange={handleChange}
+          placeholder="+375 (XX) XXX-XX-XX"
+          className={`w-full rounded-lg border bg-neutral-800 px-4 py-2.5 text-white placeholder-neutral-500 outline-none transition-colors ${
+            value && !isComplete ? "border-red-500/50" : "border-white/10 focus:border-gold"
+          }`}
+        />
+        {isComplete && (
+          <Check size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-emerald-400" />
+        )}
+      </div>
+      {value && !isComplete && (
+        <p className="mt-1 text-[11px] text-red-400">Формат: +375 (XX) XXX-XX-XX</p>
+      )}
+    </div>
+  );
+}
+
+// --- Instagram field with validation ---
+function InstagramField({ value, onChange }: { value: string; onChange: (v: string) => void }) {
+  function getError(): string | null {
+    if (!value) return null;
+    try {
+      const url = new URL(value);
+      const host = url.hostname.replace("www.", "");
+      if (host !== "instagram.com" && host !== "instagr.am") {
+        return "Ссылка должна вести на instagram.com";
+      }
+      return null;
+    } catch {
+      return "Некорректная ссылка";
+    }
+  }
+
+  const error = getError();
+
+  return (
+    <div>
+      <label className="block text-sm text-neutral-400 mb-1.5">Instagram</label>
+      <div className="relative">
+        <input
+          type="url"
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          placeholder="https://instagram.com/blackheartdancehouse"
+          className={`w-full rounded-lg border bg-neutral-800 px-4 py-2.5 text-white placeholder-neutral-500 outline-none transition-colors ${
+            error ? "border-red-500/50" : "border-white/10 focus:border-gold"
+          }`}
+        />
+        {value && !error && (
+          <Check size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-emerald-400" />
+        )}
+        {error && (
+          <AlertCircle size={14} className="absolute right-3 top-1/2 -translate-y-1/2 text-red-400" />
+        )}
+      </div>
+      {error && (
+        <p className="mt-1 text-[11px] text-red-400">{error}</p>
+      )}
+    </div>
+  );
+}
+
+// --- Compact address list ---
+function AddressList({ items, onChange }: { items: string[]; onChange: (items: string[]) => void }) {
+  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 className="space-y-2">
+      {items.map((addr, i) => (
+        <div key={i} className="flex items-center gap-2">
+          <input
+            type="text"
+            value={addr}
+            onChange={(e) => update(i, e.target.value)}
+            className="flex-1 rounded-lg border border-white/10 bg-neutral-800 px-4 py-2.5 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(); } }}
+          onBlur={add}
+          placeholder="Добавить адрес..."
+          className="flex-1 rounded-lg border border-dashed border-white/15 bg-neutral-800/50 px-4 py-2.5 text-sm text-white placeholder-neutral-500 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>
+  );
+}
+
+// --- Collapsible section ---
+function CollapsibleSection({
+  title,
+  defaultOpen = true,
+  children,
+}: {
+  title: string;
+  defaultOpen?: boolean;
+  children: React.ReactNode;
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+
+  return (
+    <div className="rounded-xl border border-white/10 bg-neutral-900/30 overflow-hidden">
+      <button
+        type="button"
+        onClick={() => setOpen(!open)}
+        className="flex items-center justify-between w-full px-5 py-3.5 text-left cursor-pointer group hover:bg-white/[0.02] transition-colors"
+      >
+        <h3 className="text-sm font-semibold text-neutral-200 group-hover:text-white transition-colors">{title}</h3>
+        <ChevronDown
+          size={16}
+          className={`text-neutral-500 transition-transform duration-200 ${open ? "rotate-180" : ""}`}
+        />
+      </button>
+      <div
+        className="grid transition-[grid-template-rows] duration-300 ease-out"
+        style={{ gridTemplateRows: open ? "1fr" : "0fr" }}
+      >
+        <div className="overflow-hidden">
+          <div className="px-5 pb-5 space-y-4">
+            {children}
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 export default function ContactEditorPage() {
   return (
     <SectionEditor<ContactInfo> sectionKey="contact" title="Контакты">
       {(data, update) => (
-        <>
+        <div className="space-y-4">
           <InputField
             label="Заголовок секции"
             value={data.title}
             onChange={(v) => update({ ...data, title: v })}
           />
-          <InputField
+
-            label="Телефон"
+          <div className="grid gap-4 sm:grid-cols-2">
-            value={data.phone}
+            <PhoneField
-            onChange={(v) => update({ ...data, phone: v })}
+              value={data.phone}
-            type="tel"
+              onChange={(v) => update({ ...data, phone: v })}
-          />
+            />
-          <InputField
+            <InstagramField
-            label="Instagram"
+              value={data.instagram}
-            value={data.instagram}
+              onChange={(v) => update({ ...data, instagram: v })}
-            onChange={(v) => update({ ...data, instagram: v })}
+            />
-            type="url"
+          </div>
-          />
+
           <InputField
             label="Часы работы"
             value={data.workingHours}
             onChange={(v) => update({ ...data, workingHours: v })}
           />
-          <ArrayEditor
+
-            label="Адреса"
+          <CollapsibleSection title="Адреса">
-            items={data.addresses}
+            <AddressList
-            onChange={(addresses) => update({ ...data, addresses })}
+              items={data.addresses}
-            renderItem={(addr, _i, updateItem) => (
+              onChange={(addresses) => update({ ...data, addresses })}
-              <InputField label="Адрес" value={addr} onChange={updateItem} />
+            />
-            )}
+          </CollapsibleSection>
-            createItem={() => ""}
+
-            addLabel="Добавить адрес"
+        </div>
-          />
-          <TextareaField
-            label="URL карты (Yandex Maps iframe)"
-            value={data.mapEmbedUrl}
-            onChange={(v) => update({ ...data, mapEmbedUrl: v })}
-            rows={2}
-          />
-        </>
       )}
     </SectionEditor>
   );