135 lines
4.5 KiB
JavaScript
135 lines
4.5 KiB
JavaScript
"use client";
|
|
|
|
import { footerL, footerR } from "@/constans";
|
|
import Logo from "@/app/component/Logo";
|
|
import Link from "next/link";
|
|
|
|
// Icons
|
|
import Linkedin from "../../icons/Linkedin";
|
|
import Telegram from "../../icons/Telegram";
|
|
import Whatsapp from "../../icons/Whatsapp";
|
|
import Instagram from "../../icons/Instagram";
|
|
import LocationF from "../../icons/LocationF";
|
|
import CalendarAddF from "../../icons/CalendarAddF";
|
|
import StethoscopeF from "../../icons/StethoscopeF";
|
|
import LogoNamad from "./LogoNamad";
|
|
import HeadMenu from "./menu/HeadMenu";
|
|
import ListMenu from "./menu/ListMenu";
|
|
import { useState } from "react";
|
|
|
|
const head = [
|
|
{ icon: <LocationF />, text: "جستجوی پزشک در شهر شما" },
|
|
{ icon: <CalendarAddF />, text: "نوبت گیری سریع و آسان" },
|
|
{ icon: <StethoscopeF />, text: "دشبورد اختصاصی برای پزشکان" },
|
|
];
|
|
|
|
function Footer({ matchedCity }) {
|
|
const socialMedias = [
|
|
{
|
|
icon: <Instagram />,
|
|
name: "instagram",
|
|
},
|
|
{
|
|
icon: <Telegram />,
|
|
name: "telegram",
|
|
},
|
|
{
|
|
icon: <Whatsapp />,
|
|
name: "whatsapp",
|
|
},
|
|
];
|
|
const [openMenu, setOpenMenu] = useState({
|
|
right: false,
|
|
left: false,
|
|
});
|
|
|
|
const changeMenu = (name) =>
|
|
setOpenMenu({ ...openMenu, [name]: !openMenu[name] });
|
|
|
|
return (
|
|
<div className="pb-[11px]">
|
|
<div className="flex items-center justify-evenly gap-[12px]">
|
|
{head.map((item, idx) => (
|
|
<div
|
|
key={idx}
|
|
className="flex flex-col lg:flex-row items-center cursor-pointer justify-start gap-1 p-[6px] hover:transition-all
|
|
transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-[#EFEFEF] bg-[#F7F7F7] hover:bg-none hover:border-[#FDBD9F]"
|
|
>
|
|
{item.icon}
|
|
<p className="text-[#2F2F2F] text-center text-[12px] sm:text-[14px] md:text-[16px] font-medium">
|
|
{item.text}
|
|
</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
<span className="h-px bg-[#D7D7D7] mb-[40px] mt-[48px] w-full block"></span>
|
|
<div
|
|
className="pb-[16px] sm:pb-[18px] md:pb-[19px] lg:pb-[21px]
|
|
flex flex-col gap-[16px] lg:gap-0 lg:flex-row items-start justify-between"
|
|
>
|
|
{/* Right */}
|
|
<div className="w-full lg:w-fit flex gap-[12px] lg:gap-[30px] flex-col items-start">
|
|
{/* Icon */}
|
|
<Logo matchedCity={matchedCity} />
|
|
<p className="w-full lg:w-fit lg:max-w-[260px] text-[#616161] text-[14px] font-normal">
|
|
{matchedCity?.footerDescription}
|
|
</p>
|
|
<div className="hidden lg:flex">
|
|
<LogoNamad />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Center */}
|
|
<div className="w-full lg:w-fit">
|
|
<HeadMenu
|
|
title={footerR[0]}
|
|
isOpen={openMenu.right}
|
|
name="right"
|
|
changeMenu={changeMenu}
|
|
/>
|
|
<ListMenu list={footerR} isOpen={openMenu.right} />
|
|
</div>
|
|
<div className="w-full lg:w-fit">
|
|
<HeadMenu
|
|
title={footerL[0]}
|
|
isOpen={openMenu.left}
|
|
name="left"
|
|
changeMenu={changeMenu}
|
|
/>
|
|
<ListMenu list={footerL} isOpen={openMenu.left} />
|
|
</div>
|
|
|
|
{/* Left */}
|
|
<div className="w-full lg:w-fit flex flex-row lg:flex-col items-center lg:items-start justify-center gap-[32px]">
|
|
<p className="text-[#3B3B3B] after:!duration-500 w-fit text-[16px] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5 relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0">
|
|
همراه با ما باشید:
|
|
</p>
|
|
<ul className="flex items-center gap-[8px] sm:gap-[11px] md:gap-[13px] lg:gap-[15px]">
|
|
{socialMedias.map((item, idx) => (
|
|
<li
|
|
key={idx}
|
|
className="p-2.5 bg-[#EAECFA] hover-rotate-icon cursor-pointer rounded-full w-fit"
|
|
>
|
|
<Link
|
|
href={matchedCity?.socialMedia[item.name] || "/"}
|
|
className="min-h-fit"
|
|
>
|
|
{item.icon}
|
|
</Link>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
<div className="flex lg:hidden justify-center w-full mt-2">
|
|
<LogoNamad />
|
|
</div>
|
|
</div>
|
|
<p className="text-center text-[#7E7E7E] text-[12px] font-normal">
|
|
{matchedCity?.footerDisclaimer}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Footer;
|