feat: contact admin — phone mask, Instagram validation, compact addresses, remove map URL
This commit is contained in:
@@ -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 { ArrayEditor } from "../_components/ArrayEditor";
|
||||
import { InputField } from "../_components/FormField";
|
||||
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">
|
||||
<PhoneField
|
||||
value={data.phone}
|
||||
onChange={(v) => update({ ...data, phone: v })}
|
||||
type="tel"
|
||||
/>
|
||||
<InputField
|
||||
label="Instagram"
|
||||
<InstagramField
|
||||
value={data.instagram}
|
||||
onChange={(v) => update({ ...data, instagram: v })}
|
||||
type="url"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<InputField
|
||||
label="Часы работы"
|
||||
value={data.workingHours}
|
||||
onChange={(v) => update({ ...data, workingHours: v })}
|
||||
/>
|
||||
<ArrayEditor
|
||||
label="Адреса"
|
||||
|
||||
<CollapsibleSection title="Адреса">
|
||||
<AddressList
|
||||
items={data.addresses}
|
||||
onChange={(addresses) => update({ ...data, addresses })}
|
||||
renderItem={(addr, _i, updateItem) => (
|
||||
<InputField label="Адрес" value={addr} onChange={updateItem} />
|
||||
)}
|
||||
createItem={() => ""}
|
||||
addLabel="Добавить адрес"
|
||||
/>
|
||||
<TextareaField
|
||||
label="URL карты (Yandex Maps iframe)"
|
||||
value={data.mapEmbedUrl}
|
||||
onChange={(v) => update({ ...data, mapEmbedUrl: v })}
|
||||
rows={2}
|
||||
/>
|
||||
</>
|
||||
</CollapsibleSection>
|
||||
|
||||
</div>
|
||||
)}
|
||||
</SectionEditor>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user