diff --git a/src/app/page.tsx b/src/app/page.tsx index bb28310..ecc2c97 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -10,8 +10,107 @@ import FaqDouble from "@/components/sections/faq/FaqDouble"; import ContactText from "@/components/sections/contact/ContactText"; import FooterCard from "@/components/sections/footer/FooterCard"; import { Heart, HelpCircle, Mail, MapPin, Phone, Sparkles, Star } from "lucide-react"; +import { useState } from "react"; export default function LandingPage() { + const [servicesData, setServicesData] = useState([ + { + id: "01", title: "Роскошный дом", description: "Просторный современный дом с высокотехнологичным оснащением, каминами и панорамными окнами для максимального комфорта", images: [ + { + id: "img-01-01", src: "http://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg", alt: "Премиум дом для отдыха - вид 1"}, + { + id: "img-01-02", src: "http://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg", alt: "Премиум дом для отдыха - вид 2"}, + { + id: "img-01-03", src: "http://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg", alt: "Премиум дом для отдыха - вид 3"}, + ], + }, + { + id: "02", title: "Баня премиум-класса", description: "Традиционная баня из натурального дерева с парной, прохладным бассейном и комнатой отдыха для полного расслабления", images: [ + { + id: "img-02-01", src: "http://img.b2bpic.net/free-photo/sauna-with-stones-thermometer-warm-benches-light-nordic-wellness_169016-69368.jpg", alt: "Роскошная баня - вид 1"}, + { + id: "img-02-02", src: "http://img.b2bpic.net/free-photo/sauna-with-stones-thermometer-warm-benches-light-nordic-wellness_169016-69368.jpg", alt: "Роскошная баня - вид 2"}, + { + id: "img-02-03", src: "http://img.b2bpic.net/free-photo/sauna-with-stones-thermometer-warm-benches-light-nordic-wellness_169016-69368.jpg", alt: "Роскошная баня - вид 3"}, + ], + }, + { + id: "03", title: "Бассейны", description: "Крытый и открытый бассейны с системой подогрева воды, джакузи и лежаками для семейного отдыха", images: [ + { + id: "img-03-01", src: "http://img.b2bpic.net/free-photo/watermelon-glasses-near-pool_501050-961.jpg", alt: "Премиум бассейны - вид 1"}, + { + id: "img-03-02", src: "http://img.b2bpic.net/free-photo/watermelon-glasses-near-pool_501050-961.jpg", alt: "Премиум бассейны - вид 2"}, + { + id: "img-03-03", src: "http://img.b2bpic.net/free-photo/watermelon-glasses-near-pool_501050-961.jpg", alt: "Премиум бассейны - вид 3"}, + ], + }, + { + id: "04", title: "Гастрономия", description: "Профессиональные повара готовят изысканные блюда из местных ингредиентов. Возможна организация банкетов и корпоративов", images: [ + { + id: "img-04-01", src: "http://img.b2bpic.net/free-photo/table-set-dinning-table_1339-3458.jpg", alt: "Ресторан и столовая - вид 1"}, + { + id: "img-04-02", src: "http://img.b2bpic.net/free-photo/table-set-dinning-table_1339-3458.jpg", alt: "Ресторан и столовая - вид 2"}, + { + id: "img-04-03", src: "http://img.b2bpic.net/free-photo/table-set-dinning-table_1339-3458.jpg", alt: "Ресторан и столовая - вид 3"}, + ], + }, + ]); + + const handleUpdateServiceImage = (serviceId: string, imageIndex: number, newImageUrl: string) => { + setServicesData((prevData) => + prevData.map((service) => + service.id === serviceId + ? { + ...service, + images: service.images.map((img, idx) => + idx === imageIndex ? { ...img, src: newImageUrl } : img + ), + } + : service + ) + ); + }; + + const handleUpdateServiceText = (serviceId: string, field: "title" | "description", newText: string) => { + setServicesData((prevData) => + prevData.map((service) => + service.id === serviceId ? { ...service, [field]: newText } : service + ) + ); + }; + + const handleAddServiceImage = (serviceId: string) => { + setServicesData((prevData) => + prevData.map((service) => + service.id === serviceId + ? { + ...service, + images: [ + ...service.images, + { + id: `img-${service.id}-${service.images.length + 1}`, + src: "http://img.b2bpic.net/free-photo/modern-spacious-room-with-large-panoramic-window_7502-7289.jpg", alt: `${service.title} - вид ${service.images.length + 1}`, + }, + ], + } + : service + ) + ); + }; + + const handleRemoveServiceImage = (serviceId: string, imageIndex: number) => { + setServicesData((prevData) => + prevData.map((service) => + service.id === serviceId + ? { + ...service, + images: service.images.filter((_, idx) => idx !== imageIndex), + } + : service + ) + ); + }; + return ( ({ + id: service.id, + title: service.title, + description: service.description, + imageSrc: service.images[0]?.src || "", imageAlt: service.images[0]?.alt || ""}))} textboxLayout="default" gridVariant="four-items-2x2-equal-grid" animationType="slide-up" @@ -102,6 +196,78 @@ export default function LandingPage() { /> +
+
+

Панель управления услугами

+ +
+ {servicesData.map((service) => ( +
+
+ + handleUpdateServiceText(service.id, "title", e.target.value)} + className="w-full px-3 py-2 border border-slate-300 rounded-md text-slate-900" + /> +
+ +
+ +