64 lines
1.6 KiB
JavaScript
64 lines
1.6 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
|
|
export default function ContactFloat() {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
/** 3 extra contact icons */
|
|
const extraIcons = [
|
|
{
|
|
href: "mailto:info@example.com",
|
|
src: "/assets/images/icons/mail.png",
|
|
label: "Mail",
|
|
offset: 30, // main button bottom(60) + 20 = 80
|
|
},
|
|
{
|
|
href: "https://wa.me/1234567890",
|
|
src: "/assets/images/icons/whatsapp.png",
|
|
label: "WhatsApp",
|
|
offset: 90, // 60 + 90
|
|
},
|
|
{
|
|
href: "sms:1234567890",
|
|
src: "/assets/images/icons/sms.png",
|
|
label: "SMS",
|
|
offset: 150, // 60 + 160
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div className="contact-icon-container">
|
|
{/* Extra icons */}
|
|
{extraIcons.map((icon, i) => (
|
|
<a
|
|
key={i}
|
|
href={icon.href}
|
|
aria-label={icon.label}
|
|
className={`contact-icon-outer extra-icon ${open ? "show" : ""}`}
|
|
style={{ bottom: `${icon.offset}px` }}
|
|
>
|
|
<img src={icon.src} alt={icon.label} className="contact-icon" />
|
|
</a>
|
|
))}
|
|
|
|
{/* Main floating button */}
|
|
<button
|
|
type="button"
|
|
aria-label={open ? "Close" : "Call Us"}
|
|
className="contact-icon-outer toggle-btn"
|
|
onClick={() => setOpen((prev) => !prev)}
|
|
>
|
|
<img
|
|
src={
|
|
open
|
|
? "/assets/images/icons/close.png" // show close icon when menu is open
|
|
: "/assets/images/icons/call.png" // default call icon
|
|
}
|
|
alt="Contact"
|
|
className="contact-icon"
|
|
/>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|