Website/components/elements/SocialToggle.js
2025-04-08 14:37:17 +07:00

23 lines
893 B
JavaScript

'use client'
import Link from "next/link"
import { useState } from "react"
export default function SocialToggle() {
const [isToggled, setToggled] = useState(false)
const handleToggle = () => setToggled(!isToggled)
return (
<>
<ul className="list-wrap" style={{ display: `${isToggled ? "block" : "none"}` }}>
<li><Link href="#"><i className="fab fa-facebook-f" /></Link></li>
<li><Link href="#"><i className="fab fa-twitter" /></Link></li>
<li><Link href="#"><i className="fab fa-instagram" /></Link></li>
<li><Link href="#"><i className="fab fa-pinterest-p" /></Link></li>
</ul>
<div className="social-toggle-icon" onClick={() => handleToggle()}>
<i className={`fas ${isToggled ? "fa-times": "fa-share-alt"}`} />
</div>
</>
)
}