misbar-website/src/Layout/Footer.tsx
Moaz Dawalibi 183be258b5 fixes
2024-09-14 11:48:13 +03:00

94 lines
4.2 KiB
TypeScript

import MediaButton from '../Components/Ui/MediaButton';
import SingleLink from '../Components/Ui/SingleLink';
import { HomelinksArray, QuicklinksArray, ServicelinksArray } from '../data/Links';
import FooterTItleWithSeparator from '../Components/Ui/FooterTItleWithSeperator';
import ContactInfo from '../Components/Ui/ContactInfo';
import { BaseURL_IMAGE } from '../api/config';
import { THeaderPage } from '../type/app';
import Spinner from '../Components/Utils/Loading/Spinner';
const Footer = ({data, isLoading}:THeaderPage) => {
const { t } = useTranslation();
const mediaArray = data?.Social_media
const contactNumber = data?.Static_info[3]
const contactEmail = data?.Static_info[4]
const Logo = data?.Static_info[5]
if (isLoading){
return <Spinner/>
}
return (
<div className='footer_contianer'>
<img className='footer_image' src="/Layout/FooterImage.png" alt="footer_image" />
<div className='Footer'>
<div className='logo_section'>
<img src={BaseURL_IMAGE + Logo?.value} width={100} />
<p>{t("We implement the corporate performance software for consolidation, planning and reporting porspises.")}</p>
<FooterTItleWithSeparator title="Follow Us :"/>
<div className='media_container'>
{mediaArray?.map((media: { id: number; image: string; link:string}) => (
<MediaButton key={media?.id} img={media?.image} link={media?.link} />
))}
</div>
</div>
<div className='home_links_section'>
<FooterTItleWithSeparator title="Home"/>
<div className="links_container">
{HomelinksArray.map((link, index) => (
<SingleLink key={index} href={link.href} name={link.name} />
))}
</div>
</div>
<div className='service_links_section'>
<FooterTItleWithSeparator title="Service"/>
<div className="links_container">
{ServicelinksArray.map((link, index) => (
<SingleLink key={index} href={link.href} name={link.name} />
))}
</div>
</div>
<div className='quick_links_section'>
<FooterTItleWithSeparator title="Quick Links"/>
<div className="links_container">
{QuicklinksArray.map((link, index) => (
<SingleLink key={index} href={link.href} name={link.name} />
))}
</div>
</div>
<div className='contact_links_section'>
<FooterTItleWithSeparator title="Contact Us"/>
<div className='media_container_info'>
<div className='single_contact_info'>
<MediaButton isStatic={true} img={MdLocalPhone}/>
<ContactInfo
title={contactNumber?.key}
info={contactNumber?.value}/>
</div>
<div className='single_contact_info'>
<MediaButton isStatic={true} img={CiMail}/>
<ContactInfo
title={contactEmail?.key}
info={contactEmail?.value}/>
</div>
</div>
<div className='responsive_sections'>
<FooterTItleWithSeparator title="Follow Us :"/>
<div className='media_container'>
{mediaArray?.map((media: { id: number; image: string; link:string}) => (
<MediaButton key={media?.id} img={media?.image} link={media?.link} />
))}
</div>
</div>
</div>
</div>
</div>
);
};
export default Footer;