leumas-private-shared/src/Footer/Footer.jsx

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';

const Footer = ({ useTheme, footerLinksUrl, socialsUrl }) => {
  const { theme } = useTheme();
  const bgColorClass = theme === 'dark' ? 'bg-black' : 'bg-white';
  const textColorClass = theme === 'dark' ? 'text-white' : 'text-gray-900';

  const [siteFooterLinks, setSiteFooterLinks] = useState([]);
  const [socialLinks, setSocialLinks] = useState([]);

  useEffect(() => {
    // Fetching site footer links
    fetch(footerLinksUrl)
      .then(response => response.json())
      .then(data => setSiteFooterLinks(data))
      .catch(error => console.error('Error fetching footer links:', error));

    // Fetching social links
    fetch(socialsUrl)
      .then(response => response.json())
      .then(data => setSocialLinks(data))
      .catch(error => console.error('Error fetching social links:', error));
  }, [footerLinksUrl, socialsUrl]);

  return (
    <footer className={`${bgColorClass} ${textColorClass} p-10`} style={{ backgroundColor: 'var(--primary-color)', color: 'var(--text-dark)' }}>
      <a href="https://leumas.tech">
        <img src="https://res.cloudinary.com/dx25lltre/image/upload/v1707176122/Leumas/2_t6ap9y.svg" alt="Leumas Logo" className="h-12 w-12 mb-6" />
      </a>

      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 w-full mb-6">
        {siteFooterLinks.map((section, index) => (
          <div key={index}>
            <a href={section?.titleLink}>
              <h6 className={`footer-title mb-4 underline ${textColorClass}`}><strong>{section.title}</strong></h6>
            </a>
            {section.links.map((link, linkIndex) => (
              <Link key={linkIndex} to={link.href} className={`block mb-2 hover:underline hover:text-blue-400 ${textColorClass}`}>
                {link.name}
              </Link>
            ))}
          </div>
        ))}
      </div>

      <div className="flex flex-col lg:flex-row lg:items-center lg:justify-between mt-6 w-full">
        <p className={`mb-4 lg:mb-0 ${textColorClass}`}>© 2024 Leumas Tech. All rights reserved.</p>
        <div className="flex justify-center items-center lg:justify-end space-x-4  h-8">
          {socialLinks.map((link, index) => (
            <a key={index} href={link.href} className=" h-8 w-8 rounded-lg hoverEffect hover:text-blue-600 flex items-center justify-center overflow-hidden">
              <img src={link.svgPath} alt={link.name} className="w-full h-full" style={{ objectFit: 'cover' }} />
            </a>
          ))}
        </div>
      </div>
    </footer>
  );
};

export default Footer;