StikeArena_chrt/src/components/HeaderPage.tsx

import React, {useState} from 'react';
import Link from "next/link";
import Image from "next/image";
import {useBronStore} from "@/store/useBronStore";
import styled from "styled-components";

type HeaderPageProps = {
    tg?: string;
    phone?: string;
    gis2?: string;
}

const Header = styled.header`
    margin: 0 auto;
    max-width: 1480px;
    height: 148px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    &::after{
        content: "";
        width: 100vw;
        height:100%;
        border-radius: 0 0 20px 20px;
        background-color: rgba(14,14,23,.7);
        backdrop-filter: blur(100%);
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: -1;
    }
    @media (max-width: 1500px) {
        height: 120px;
        padding: 0 40px;
    }
    @media (max-width: 480px) {
        height: 100px;
    }
`
const HeaderSchedule = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    h3{
        font-size: 48px;
    }
    p{
        font-size: 20px;
        line-height: 1;
    }
    @media (max-width: 600px) {
        display: none;
    }
`
const HeaderPhone = styled.div`
    display: flex;
    align-items: start;
    flex-direction: column;
    justify-content: start;
    margin-left: 33px;
    h4{
        font-size: 18px;
        margin-top: 5px;
        cursor: pointer;
        font-weight: normal;
    }
    p{
        font-size: 20px;
        line-height: 1;
    }
`
const HeaderBlock = styled.div`
    display: flex;
    align-items: center;
    justify-content: center;
    .logo{
        margin-right: 56px;
    }
    .gis2Link{
        margin-right: 15px;
    }
    .tgLink{
        margin: 0 12px 0 8px;
    }
    .vkLink{
        margin: 0 6px 0 8px;
    }
    .maxLink{
        margin: 0 8px 0 6px;
    }
    &.desktopOnly {
        @media (max-width: 900px) {
            display: none;
        }
    }
    .footerPhone{
        h4{
            text-align: center;
            font-size: 20px;
        }
    }
    @media (max-width: 1100px) {
        .headerImage img{
            height: 40px;
        }
        .gis2Link{
            margin-right: 2px;
        }
        .tgLink{
            margin: 0 6px 0 -2px;
        }
    }
    @media (max-width: 900px) {
        width: 100%;
        justify-content:space-between;
    }
    @media (max-width: 1100px) {
        .headerImage img{
            height: 40px;
        }
        .gis2Link{
            margin-right: 2px;
        }
        .tgLink{
            margin: 0 6px 0 -2px;
        }
    }
    @media (max-width: 480px) {
        .logo img{
            width: 150px;
        }
    }

`
const MenuButton = styled.button`
  display: none;
  background: none;
  border: none;
  cursor: pointer;

  @media (max-width: 900px) {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
  }

  &:hover img {
    transform: scale(1.1);
  }
`
const MobileMenu = styled.div<{ $isOpenMenu: boolean }>`
  position: fixed;
  top: 0;
  right: ${({ $isOpenMenu }) => ($isOpenMenu ? '0' : '-100%')};
  width: 100%;
  height: 100vh;
  background: rgba(14, 14, 23, 0.95);
  backdrop-filter: blur(10px);
  z-index: 999;
  transition: right 0.3s ease-in-out;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  a {
    color: white;
    font-size: 28px;
    text-decoration: none;
  }

  button {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
  }

  @media (min-width: 901px) {
    display: none;
  }
`;


const HeaderPage: React.FC<HeaderPageProps> = ({tg, gis2, phone}) => {
    const [isMenuOpen, setIsMenuOpen] = useState(false);

    const open = useBronStore((s) => s.open);
    return (
        <Header>
            <HeaderBlock>
                <Link href='/' className={'logo'}>
                    <Image src={'/icons/logo.png'} alt={'logo'} width={196} height={52} loading={'lazy'} />
                </Link>
                <HeaderSchedule>
                    <h3>24/7</h3>
                    <p>Пиши нам<br />мы на связи</p>
                </HeaderSchedule>
                <MenuButton onClick={() => setIsMenuOpen(true)}>
                    <Image src="/icons/menu.svg" alt="menu" width={40} height={40} loading="lazy" />
                </MenuButton>
            </HeaderBlock>
            <HeaderBlock className={"desktopOnly"}>
                {gis2 ? (
                    <Link href={gis2} className="gis2Link headerImage" target="_blank">
                        <Image src="/icons/location.svg" alt="geo" width={37} height={46} loading="lazy" />
                    </Link>
                ) : (
                    <Link href={'/'} className="gis2Link headerImage" target="_blank">
                        <Image src="/icons/location.svg" alt="geo" width={37} height={46} loading="lazy" />
                    </Link>
                )}

                {tg ? (
                    <Link href={tg} className="tgLink headerImage" target="_blank">
                        <Image src="/icons/tg.png" alt="tg" width={46} height={4} loading="lazy" />
                    </Link>
                ) : (
                    <Link href={'/'} className="tgLink headerImage" target="_blank">
                        <Image src="/icons/tg.png" alt="tg" width={46} height={46} loading="lazy" />
                    </Link>
                )}

                <Link href="https://vk.ru" className="vkLink headerImage" target="_blank">
                    <Image src="/icons/vk.svg" alt="vk" width={50} height={50} loading="lazy" />
                </Link>

                <Link href="https://max.ru" className="maxLink headerImage" target="_blank">
                    <Image src="/icons/max.svg" alt="max" width={52} height={52} loading="lazy" />
                </Link>

                <HeaderPhone>
                    <p style={{ marginBottom: 0 }}>{phone || '+7 775 260 85 59'}</p>
                    <h4 onClick={() => open('zayvka-game')}>Заказать звонок</h4>
                </HeaderPhone>
            </HeaderBlock>
            <MobileMenu $isOpenMenu={isMenuOpen}>
                <button onClick={() => setIsMenuOpen(false)} style={{fontSize: "32px"}}>
                    Close
                </button>

                {gis2 && <Link href={gis2} target="_blank">2 ГИС</Link>}
                {tg && <Link href={tg} target="_blank">Telegram</Link>}
                <Link href="https://vk.ru" target="_blank">VK</Link>
                <Link href="https://max.ru" target="_blank">Max</Link>
                {phone && <Link href={`tel:${phone}`}>{phone}</Link>}

            </MobileMenu>
        </Header>
    );
};

export default HeaderPage;