wgp-next-shop-ui-lib/src/components/Layout/Footer/Footer.jsx

Библиотека UI-компонентов для Next-Shop с поддержкой e-commerce функций

import React from "react";
import Link from "next/link";

function Footer({info, sections, legal, payList = []}) {
    const currentYear = new Date().getFullYear();
    return (
        <>
            <div className="mt-10 grid grid-cols-1 gap-x-8 gap-y-10 sm:grid-cols-2 lg:grid-cols-6">
                <div className="col-span-2 lg:col-span-2">
                    <h3 className="text-xl font-semibold text-gray-900">
                        {info.title}
                    </h3>
                    <p className={'text-sm/8 text-gray-800'}>{info.subTitle}</p>
                </div>

                {sections.map((section, sectionIdx) => (
                    <div key={sectionIdx}>
                        <h3 className="text-sm/6 font-semibold text-gray-900">{section.title}</h3>
                        <ul role="list" className="mt-4 space-y-4">
                            {section.links.map((link, linkIdx) => (
                                <li className="group" key={linkIdx}>
                                    <Link
                                        href={link.href}
                                        className="text-sm/6 text-gray-600 hover:text-gray-900"
                                    >
                                        {link.name}
                                    </Link>
                                </li>
                            ))}
                        </ul>
                    </div>
                ))}
            </div>
            <hr className="mt-10 border-t "/>
            <div className={'flex flex-col md:flex-row justify-between my-8 gap-8'}>
                <small className={'mb-6'}> © {currentYear} {info.title}</small>
                <ul role="list" className="flex gap-3 flex-col md:flex-row">
                    {legal.map((link, linkIdx) => (
                        <li className="group" key={linkIdx}>
                            <Link
                                href={link.href}
                                className="text-sm/6 text-gray-600 hover:text-gray-900"
                            >
                                {link.name}
                            </Link>
                        </li>
                    ))}
                </ul>
                {payList.length > 0 && (
                    <ul role="listPay" className="flex gap-3 flex-row">
                        {payList.map((payItem, payItemIdx) => (
                            <li className="group" key={payItemIdx}>
                                    <span className="text-sm/6 px-3 py-1 bg-gray-300 rounded">
                                        {payItem.name}
                                    </span>
                            </li>
                        ))}
                    </ul>
                )}
            </div>
        </>
    );
}

export default Footer;