feat: floating contact bar, remove pricing contact links, fix admin hooks
- Add FloatingContact bar (Записаться + Instagram) visible while scrolling - Hides on hero and near contact section, centered at bottom - Move BackToTop button up to avoid overlap - Remove redundant ContactHint from Pricing section (floating bar covers it) - Fix React hooks order violation in AdminLayout (early return before useEffect) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -51,15 +51,11 @@ export default function AdminLayout({
|
|||||||
const router = useRouter();
|
const router = useRouter();
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(false);
|
const [sidebarOpen, setSidebarOpen] = useState(false);
|
||||||
const [unreadTotal, setUnreadTotal] = useState(0);
|
const [unreadTotal, setUnreadTotal] = useState(0);
|
||||||
|
const isLoginPage = pathname === "/admin/login";
|
||||||
// Don't render admin shell on login page
|
|
||||||
if (pathname === "/admin/login") {
|
|
||||||
return <>{children}</>;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Fetch unread counts — poll every 30s
|
// Fetch unread counts — poll every 30s
|
||||||
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
if (isLoginPage) return;
|
||||||
function fetchCounts() {
|
function fetchCounts() {
|
||||||
adminFetch("/api/admin/unread-counts")
|
adminFetch("/api/admin/unread-counts")
|
||||||
.then((r) => r.json())
|
.then((r) => r.json())
|
||||||
@@ -69,7 +65,12 @@ export default function AdminLayout({
|
|||||||
fetchCounts();
|
fetchCounts();
|
||||||
const interval = setInterval(fetchCounts, 30000);
|
const interval = setInterval(fetchCounts, 30000);
|
||||||
return () => clearInterval(interval);
|
return () => clearInterval(interval);
|
||||||
}, []);
|
}, [isLoginPage]);
|
||||||
|
|
||||||
|
// Don't render admin shell on login page
|
||||||
|
if (isLoginPage) {
|
||||||
|
return <>{children}</>;
|
||||||
|
}
|
||||||
|
|
||||||
async function handleLogout() {
|
async function handleLogout() {
|
||||||
await fetch("/api/logout", { method: "POST" });
|
await fetch("/api/logout", { method: "POST" });
|
||||||
|
|||||||
@@ -9,6 +9,7 @@ import { News } from "@/components/sections/News";
|
|||||||
import { FAQ } from "@/components/sections/FAQ";
|
import { FAQ } from "@/components/sections/FAQ";
|
||||||
import { Contact } from "@/components/sections/Contact";
|
import { Contact } from "@/components/sections/Contact";
|
||||||
import { BackToTop } from "@/components/ui/BackToTop";
|
import { BackToTop } from "@/components/ui/BackToTop";
|
||||||
|
import { FloatingContact } from "@/components/ui/FloatingContact";
|
||||||
import { Header } from "@/components/layout/Header";
|
import { Header } from "@/components/layout/Header";
|
||||||
import { Footer } from "@/components/layout/Footer";
|
import { Footer } from "@/components/layout/Footer";
|
||||||
import { getContent } from "@/lib/content";
|
import { getContent } from "@/lib/content";
|
||||||
@@ -42,6 +43,7 @@ export default function HomePage() {
|
|||||||
<FAQ data={content.faq} />
|
<FAQ data={content.faq} />
|
||||||
<Contact data={content.contact} />
|
<Contact data={content.contact} />
|
||||||
<BackToTop />
|
<BackToTop />
|
||||||
|
<FloatingContact />
|
||||||
</main>
|
</main>
|
||||||
<Footer />
|
<Footer />
|
||||||
</>
|
</>
|
||||||
|
|||||||
@@ -1,10 +1,9 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
import { CreditCard, Building2, ScrollText, Crown, Sparkles, Instagram, Send, Phone } from "lucide-react";
|
import { CreditCard, Building2, ScrollText, Crown, Sparkles } from "lucide-react";
|
||||||
import { SectionHeading } from "@/components/ui/SectionHeading";
|
import { SectionHeading } from "@/components/ui/SectionHeading";
|
||||||
import { Reveal } from "@/components/ui/Reveal";
|
import { Reveal } from "@/components/ui/Reveal";
|
||||||
import { BRAND } from "@/lib/constants";
|
|
||||||
import type { SiteContent } from "@/types/content";
|
import type { SiteContent } from "@/types/content";
|
||||||
|
|
||||||
type Tab = "prices" | "rental" | "rules";
|
type Tab = "prices" | "rental" | "rules";
|
||||||
@@ -13,43 +12,8 @@ interface PricingProps {
|
|||||||
data: SiteContent["pricing"];
|
data: SiteContent["pricing"];
|
||||||
}
|
}
|
||||||
|
|
||||||
function ContactHint() {
|
|
||||||
return (
|
|
||||||
<div className="mt-5 flex flex-wrap items-center justify-center gap-3 text-xs text-neutral-500">
|
|
||||||
<span>Для записи и бронирования:</span>
|
|
||||||
<a
|
|
||||||
href={BRAND.instagram}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="inline-flex items-center gap-1 rounded-full border border-white/[0.06] px-3 py-1.5 text-pink-400 hover:text-pink-300 hover:border-pink-400/30 transition-colors"
|
|
||||||
>
|
|
||||||
<Instagram size={12} />
|
|
||||||
Instagram
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="https://t.me/blackheartdancehouse"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
className="inline-flex items-center gap-1 rounded-full border border-white/[0.06] px-3 py-1.5 text-blue-400 hover:text-blue-300 hover:border-blue-400/30 transition-colors"
|
|
||||||
>
|
|
||||||
<Send size={12} />
|
|
||||||
Telegram
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
href="tel:+375293897001"
|
|
||||||
className="inline-flex items-center gap-1 rounded-full border border-white/[0.06] px-3 py-1.5 text-emerald-400 hover:text-emerald-300 hover:border-emerald-400/30 transition-colors"
|
|
||||||
>
|
|
||||||
<Phone size={12} />
|
|
||||||
Позвонить
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function Pricing({ data: pricing }: PricingProps) {
|
export function Pricing({ data: pricing }: PricingProps) {
|
||||||
const [activeTab, setActiveTab] = useState<Tab>("prices");
|
const [activeTab, setActiveTab] = useState<Tab>("prices");
|
||||||
const showHint = pricing.showContactHint !== false; // default true
|
|
||||||
|
|
||||||
const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
|
const tabs: { id: Tab; label: string; icon: React.ReactNode }[] = [
|
||||||
{ id: "prices", label: "Абонементы", icon: <CreditCard size={16} /> },
|
{ id: "prices", label: "Абонементы", icon: <CreditCard size={16} /> },
|
||||||
{ id: "rental", label: "Аренда зала", icon: <Building2 size={16} /> },
|
{ id: "rental", label: "Аренда зала", icon: <Building2 size={16} /> },
|
||||||
@@ -166,7 +130,6 @@ export function Pricing({ data: pricing }: PricingProps) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{showHint && <ContactHint />}
|
|
||||||
</div>
|
</div>
|
||||||
</Reveal>
|
</Reveal>
|
||||||
)}
|
)}
|
||||||
@@ -196,7 +159,6 @@ export function Pricing({ data: pricing }: PricingProps) {
|
|||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
|
|
||||||
{showHint && <ContactHint />}
|
|
||||||
</div>
|
</div>
|
||||||
</Reveal>
|
</Reveal>
|
||||||
)}
|
)}
|
||||||
|
|||||||
@@ -19,7 +19,7 @@ export function BackToTop() {
|
|||||||
<button
|
<button
|
||||||
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
onClick={() => window.scrollTo({ top: 0, behavior: "smooth" })}
|
||||||
aria-label="Наверх"
|
aria-label="Наверх"
|
||||||
className={`fixed bottom-6 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-gold/30 bg-black/60 text-gold-light backdrop-blur-sm transition-all duration-300 hover:bg-gold/20 hover:border-gold/50 ${
|
className={`fixed bottom-20 right-6 z-40 flex h-10 w-10 items-center justify-center rounded-full border border-gold/30 bg-black/60 text-gold-light backdrop-blur-sm transition-all duration-300 hover:bg-gold/20 hover:border-gold/50 ${
|
||||||
visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0 pointer-events-none"
|
visible ? "translate-y-0 opacity-100" : "translate-y-4 opacity-0 pointer-events-none"
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
|
|||||||
65
src/components/ui/FloatingContact.tsx
Normal file
65
src/components/ui/FloatingContact.tsx
Normal file
@@ -0,0 +1,65 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { useState, useEffect } from "react";
|
||||||
|
import { Instagram } from "lucide-react";
|
||||||
|
import { BRAND } from "@/lib/constants";
|
||||||
|
import { SignupModal } from "./SignupModal";
|
||||||
|
|
||||||
|
export function FloatingContact() {
|
||||||
|
const [visible, setVisible] = useState(false);
|
||||||
|
const [modalOpen, setModalOpen] = useState(false);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
function handleScroll() {
|
||||||
|
const contactEl = document.getElementById("contact");
|
||||||
|
|
||||||
|
const pastHero = window.scrollY > window.innerHeight * 0.7;
|
||||||
|
const reachedContact = contactEl
|
||||||
|
? window.scrollY + window.innerHeight > contactEl.offsetTop + 100
|
||||||
|
: false;
|
||||||
|
|
||||||
|
setVisible(pastHero && !reachedContact);
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||||
|
handleScroll();
|
||||||
|
return () => window.removeEventListener("scroll", handleScroll);
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<div
|
||||||
|
className={`fixed bottom-6 left-1/2 z-40 -translate-x-1/2 flex items-center gap-3 rounded-full border border-gold/20 bg-black/80 px-2 py-2 backdrop-blur-md shadow-lg shadow-black/40 transition-all duration-400 ${
|
||||||
|
visible
|
||||||
|
? "translate-y-0 opacity-100"
|
||||||
|
: "translate-y-6 opacity-0 pointer-events-none"
|
||||||
|
}`}
|
||||||
|
>
|
||||||
|
<button
|
||||||
|
onClick={() => setModalOpen(true)}
|
||||||
|
className="rounded-full bg-gold px-5 py-2 text-sm font-semibold text-black transition-colors hover:bg-gold-light"
|
||||||
|
>
|
||||||
|
Записаться
|
||||||
|
</button>
|
||||||
|
|
||||||
|
<a
|
||||||
|
href={BRAND.instagram}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
aria-label="Instagram"
|
||||||
|
className="flex h-9 w-9 items-center justify-center rounded-full border border-gold/30 text-gold-light transition-colors hover:bg-gold/20 hover:border-gold/50"
|
||||||
|
>
|
||||||
|
<Instagram size={18} />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<SignupModal
|
||||||
|
open={modalOpen}
|
||||||
|
onClose={() => setModalOpen(false)}
|
||||||
|
title="Записаться на занятие"
|
||||||
|
subtitle="Оставьте контактные данные и мы свяжемся с вами"
|
||||||
|
endpoint="/api/group-booking"
|
||||||
|
/>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user