wgp-next-shop-ui-lib/src/Categories/Footer.js

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

import Link from "next/link";

export function Footer({ info, sections, legal }) {
    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'}>
                <small className={'mb-6'}> © {currentYear} {info.title}</small>
                <div>
                    <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>
                </div>
            </div>
        </>
    );
}