100 lines
2.4 KiB
JavaScript
100 lines
2.4 KiB
JavaScript
"use client";
|
|
import React, { useState } from "react";
|
|
|
|
export default function SocialFloat() {
|
|
const [open, setOpen] = useState(false);
|
|
|
|
/** Social icons */
|
|
const socialIcons = [
|
|
{
|
|
href: "https://www.facebook.com/ELRaphaRehabCenter/",
|
|
iconClass: "icon-4",
|
|
label: "Facebook",
|
|
offset: -40,
|
|
},
|
|
{
|
|
href: "https://www.instagram.com/elrapharehab/",
|
|
iconClass: "icon-7",
|
|
label: "Instagram",
|
|
offset: 40,
|
|
},
|
|
];
|
|
|
|
return (
|
|
<div>
|
|
{/* Extra social icons */}
|
|
{open && (
|
|
<div
|
|
style={{
|
|
position: "fixed",
|
|
top: "50%",
|
|
right: "70px",
|
|
transform: "translateY(-50%)",
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
gap: "15px",
|
|
zIndex: 9999,
|
|
}}
|
|
>
|
|
{socialIcons.map((icon, i) => (
|
|
<a
|
|
key={i}
|
|
href={icon.href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
aria-label={icon.label}
|
|
style={{
|
|
background: "#102548",
|
|
borderRadius: "50%",
|
|
width: "45px",
|
|
height: "45px",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
color: "#fff", // White icon color
|
|
fontSize: "22px",
|
|
textDecoration: "none",
|
|
}}
|
|
>
|
|
<i className={icon.iconClass}></i>
|
|
</a>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
{/* Main floating button */}
|
|
<button
|
|
type="button"
|
|
aria-label={open ? "Close Socials" : "Open Socials"}
|
|
onClick={() => setOpen((prev) => !prev)}
|
|
style={{
|
|
position: "fixed",
|
|
top: "50%",
|
|
right: "20px",
|
|
transform: "translateY(-50%)",
|
|
background: "#102548",
|
|
borderRadius: "50%",
|
|
padding: "15px",
|
|
border: "none",
|
|
zIndex: 9999,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
cursor: "pointer",
|
|
color: "#fff",
|
|
}}
|
|
>
|
|
<img
|
|
src={
|
|
open
|
|
? "/assets/images/cancel.png"
|
|
: "/assets/images/share.png"
|
|
}
|
|
alt="Social"
|
|
style={{ width: "28px", height: "28px" }}
|
|
/>
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|