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

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

'use client';
import React from "react";
import {
    Badge,
} from "@nextui-org/react";
import {usePathname} from 'next/navigation';
import clsx from 'clsx';
import { ShoppingBag } from 'lucide-react'
import { useSession } from "next-auth/react";
import { useCart } from 'wgp-next-shop-ui-lib';
export default function NavbarComponent() {
    const { totalQuantity } = useCart();
    const pathname = usePathname();
    const { data: session } = useSession();

    return (
        <div className="border-t fixed bottom-0 w-full py-1 bg-white z-10 md:hidden">
            <div className="grid grid-cols-4 bottom_line">
                <a href="/">
                    <div className={clsx(
                        'text-center flex flex-col items-center',
                        {
                            'text-blue-600': pathname === '/',
                        },
                    )}
                    >
                        <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                             className="lucide lucide-house">
                            <path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/>
                            <path
                                d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
                        </svg>
                        <span className={"text-xs"}>Home</span>
                    </div>
                </a>
                <a href="/shop">
                    <div className={clsx(
                        'text-center flex flex-col items-center',
                        {
                            'text-blue-600': pathname === '/shop',
                        },
                    )}>
                        <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                            <path fill-rule="evenodd" clip-rule="evenodd" d="M20 4.25L2 4.25V2.75H20V4.25ZM2 11.25L8 11.25V9.75L2 9.75V11.25ZM2 19.25H9V17.75H2V19.25ZM12.3407 10.5343C13.144 9.79353 14.2086 9.40224 15.3003 9.44645C16.3921 9.49067 17.4216 9.96677 18.1623 10.77C18.903 11.5733 19.2943 12.6379 19.2501 13.7296C19.2059 14.8214 18.7298 15.8509 17.9265 16.5916C17.1233 17.3323 16.0587 17.7236 14.9669 17.6794C13.8752 17.6352 12.8457 17.1591 12.105 16.3558C11.3642 15.5526 10.9729 14.488 11.0172 13.3962C11.0614 12.3044 11.5375 11.275 12.3407 10.5343ZM15.361 7.94768C13.8718 7.88737 12.4196 8.42113 11.3239 9.43154C10.2282 10.4419 9.5787 11.8462 9.51839 13.3355C9.45807 14.8248 9.99183 16.277 11.0022 17.3727C12.0127 18.4684 13.417 19.1178 14.9062 19.1782C16.1434 19.2283 17.3551 18.8684 18.358 18.1658L20.9185 20.9425L21.4269 21.4938L22.5296 20.4769L22.0212 19.9256L19.4607 17.1489C20.2421 16.2061 20.6988 15.0275 20.7489 13.7903C20.8092 12.3011 20.2754 10.8489 19.265 9.75316C18.2546 8.65745 16.8503 8.008 15.361 7.94768Z" fill="#211E1E"/>
                        </svg>

                        <span className={"text-xs"}>Catalog</span>
                    </div>
                </a>
                <a href="/shop/cart">
                    <div className={clsx(
                        'text-center flex flex-col items-center',
                        {
                            'text-blue-600': pathname === '/shop/cart',
                        },
                    )}>
                        <Badge isInvisible={totalQuantity === 0} color="primary" content={totalQuantity > 0 ? totalQuantity : null}>
                            <ShoppingBag />
                        </Badge>
                        <span className={"text-xs"}>Cart</span>
                    </div>
                </a>
                <a href={"/profile"}>
                    <div className={clsx(
                        'text-center flex flex-col items-center',
                        {
                            'text-blue-600': pathname === ('/profile'),
                        },
                    )}>
                        <svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 24 24" fill="none"
                             stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
                             className="lucide lucide-user-round">
                            <circle cx="12" cy="8" r="5"/>
                            <path d="M20 21a8 8 0 0 0-16 0"/>
                        </svg>
                        <span className={"text-xs"}>
                            {"Account"}
                        </span>
                    </div>
                </a>
            </div>
        </div>
    )
}