120 lines
4.2 KiB
TypeScript
120 lines
4.2 KiB
TypeScript
import type { NextPage } from "next";
|
|
import Lottie from "react-lottie";
|
|
import Image from "next/image";
|
|
import { MutableRefObject, useRef, useState } from "react";
|
|
|
|
|
|
|
|
|
|
|
|
const Footer: NextPage = () => {
|
|
|
|
const playAnimation = (ref: any) => {
|
|
if (ref?.current) {
|
|
ref.current.play()
|
|
}
|
|
}
|
|
|
|
const [isPause, setIsPause] = useState(true)
|
|
const [isStopped, setIsStopped] = useState(true)
|
|
|
|
|
|
const contactLinks = [
|
|
{
|
|
href: "https://github.com/amirmoghi3",
|
|
label: "Github",
|
|
icon: require("assets/json/github.json"),
|
|
path: "assets/json/github.json",
|
|
ref: useRef(null)
|
|
},
|
|
{
|
|
href: "https://www.linkedin.com/in/amirmoghi3/",
|
|
label: "LinkedIn",
|
|
icon: require("assets/json/linkedin.json"),
|
|
path: "assets/json/linkedin.json",
|
|
ref: useRef(null)
|
|
},
|
|
{
|
|
href: "https://www.instagram.com/amirmoghi3/",
|
|
label: "Instagram",
|
|
icon: require("assets/json/instagram.json"),
|
|
path: "assets/json/instagram.json",
|
|
ref: useRef(null)
|
|
},
|
|
{
|
|
href: "https://twitter.com/amirmoghi3",
|
|
label: "Twitter",
|
|
icon: require("assets/json/twitter.json"),
|
|
path: "assets/json/twitter.json",
|
|
ref: useRef(null)
|
|
},
|
|
{
|
|
// email
|
|
href: "mailto:siramirmoghi3@gmail.com",
|
|
label: "Email",
|
|
icon: require("assets/images/email.png"),
|
|
|
|
},
|
|
{
|
|
//discord
|
|
href: "https://discord.gg/FeECbW766J",
|
|
label: "Discord",
|
|
icon: require("assets/json/discord.json"),
|
|
path: "assets/json/discord.json",
|
|
ref: useRef(null)
|
|
|
|
}
|
|
|
|
]
|
|
|
|
return (
|
|
<div className="fixed bottom-5 md:px-5 py-3 w-full">
|
|
<div className="flex flex-col md:flex-row-reverse justify-between w-full">
|
|
<div className="flex flex-row">
|
|
{
|
|
contactLinks.map(contactLink => (
|
|
<a onMouseEnter={() => playAnimation(contactLink.ref)} href={contactLink.href} target="_blank" key={contactLink.href} className="px-2 cursor-pointer" rel="noreferrer" >
|
|
{
|
|
contactLink.path ?
|
|
<div className="bg-secondary w-7 h-7 hover:bg-gold">
|
|
<div className="relative -top-2 -right-2">
|
|
<Lottie options={{
|
|
animationData: contactLink.icon,
|
|
loop: false,
|
|
autoplay: true,
|
|
|
|
}}
|
|
height={20}
|
|
width={20}
|
|
title={contactLink.label}
|
|
/>
|
|
</div>
|
|
</div>
|
|
: (
|
|
<div className="bg-secondary w-7 h-7 hover:bg-gold">
|
|
<div className="relative -top-2 -right-3">
|
|
<Image src={contactLink.icon} width={20} height={20} alt={contactLink.label} />
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
</a>
|
|
))
|
|
}
|
|
<div className="px-2 cursor-pointer w-[20px] h-[20px]">
|
|
|
|
</div>
|
|
</div>
|
|
<div>
|
|
<span className="text-secondary text-xs opacity-30 pl-1 md:pl-0 ">
|
|
@2020 Amir Hossein Moghiseh
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
)
|
|
|
|
}
|
|
|
|
export default Footer; |