import * as React from "react";
import styled from "styled-components";
import { theme } from "../../_globalStyles/theme";
import { Button, MenuItem, Select } from "@mui/material";
import { useBasket } from "./BasketContext";
import { useNavigate } from "react-router-dom";
import BackButton from "../../components/BackButton";
import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';


const imageUrls: { [key: string]: string } = {
  "1": "https://vyacheslavna.ru/SOURCE/images/catalog/pink_shirt1.jpg",
  "2": "https://vyacheslavna.ru/SOURCE/images/catalog/jacket.jpg",
  "3": "https://vyacheslavna.ru/SOURCE/images/catalog/corset.jpg",
  "4": "https://vyacheslavna.ru/SOURCE/images/catalog/shirt2.jpg",
  "5": "https://vyacheslavna.ru/SOURCE/images/catalog/skirt1.jpg",
  "6": "https://vyacheslavna.ru/SOURCE/images/catalog/blue_shirt_catalog.jpg",
  "7": "https://vyacheslavna.ru/SOURCE/images/catalog/dress.jpg",
};

export const Basket = () => {
  const { basket, updateProductQuantity, updateProductSize, removeProductToBasket } = useBasket();
  const navigate = useNavigate();

  const handleOrderClick = () => {
    const total = basket.reduce((sum, product) => sum + product.price * product.quantity, 0);
    navigate("/order", {
      state: {
        products: basket,
        total,
      },
    });
  };

  return (
    <StyledBasket>
      <StyledBackButton>
        <BackButton />
      </StyledBackButton>
      <BasketTitle>КОРЗИНА</BasketTitle>
      {basket.length === 0 ? (
        <EmptyBasket>Ваша корзина пуста</EmptyBasket>
      ) : (
        <BasketTable>
          <TableHeader>
          <ColumnProduct>Товар</ColumnProduct>
          <ColumnSize>Размер</ColumnSize>
            <ColumnKolvo>Кол-во</ColumnKolvo>
            <ColumnPriceHead>Цена</ColumnPriceHead>
            <Column />
          </TableHeader>
          {basket.map((product) => (
            <TableRow key={`${product.id}-${product.sizeSelect}`}>

                <ImageContainer>
                  <ProductImage src={imageUrls[product.id]} alt={product.title} />
                </ImageContainer>

                <DetailsContainer>
                  <TitleCompoundWrapper>
                  <ProductTitle>{product.title}</ProductTitle>
                  <ProductCompound>{product.compound}</ProductCompound>
                  </TitleCompoundWrapper>

              <SelectorsColumn>
                {product.sizes.length === 1 ? (
                  // Если размер только один, отображаем черточку
                  <SingleSize>Единый размер</SingleSize>
                ) : (
                  // Если размеров несколько, отображаем Select
                  <StyledSelect
                    value={product.sizeSelect}
                    onChange={(e) =>
                      updateProductSize(product.id, product.sizeSelect || "", e.target.value as string)
                    }
                    displayEmpty
                    IconComponent={KeyboardArrowDownIcon}
                  >
                    {product.sizes.map((size) => (
                      <MenuItem key={size} value={size}>
                        {size}
                      </MenuItem>
                    ))}
                  </StyledSelect>
                )}
              </SelectorsColumn>
              <Column>
              <QuantityWrapper>
              <QuantityControl>
              <QuantityButton
                onClick={() =>
                  updateProductQuantity(product.id, product.sizeSelect || "", product.quantity - 1)
                }
              >
                -
              </QuantityButton>
              <Quantity>{product.quantity}</Quantity>
              <QuantityButton
                onClick={() =>
                  updateProductQuantity(product.id, product.sizeSelect || "", product.quantity + 1)
                }
              >
                +
              </QuantityButton>
            </QuantityControl>
            </QuantityWrapper>
            

              </Column>
              <ColumnPrice>{product.price * product.quantity}₽</ColumnPrice>

              </DetailsContainer>

              <RemoveButtonContainer>

                <RemoveButton
                  onClick={() => removeProductToBasket(product.id, product.sizeSelect || "")}
                >
                  ×
                </RemoveButton>
                </RemoveButtonContainer>

            </TableRow>
          ))}
        </BasketTable>
      )}
      <SummaryDiv>
      <StyledFooter>
        <TotalText>
          Всего:{" "}
          {basket.reduce((sum, product) => sum + product.price * product.quantity, 0)}₽
        </TotalText>
        <StyledButton sx={{ textTransform: "none" }} onClick={handleOrderClick}>
          / Оформить сейчас
        </StyledButton>
        </StyledFooter>
      </SummaryDiv>
    </StyledBasket>
  );
};

const StyledBasket = styled.div`
  font-family: "NEXT ART", sans-serif !important;
  font-weight: 500;
  line-height: 1.5;
  button {
    font-family: "Fira Mono", monospace;
  }
    min-height: 80%;
  display: flex;
  flex-direction: column;
  padding: 20px;
 


`;


const ColumnKolvo = styled.div`
 text-align: center;
  font-size: 1.2vw;
  padding-right: 7vw;
  color: #C0C0C0;  

  @media (max-width: 1200px) {
    padding-right: 10vw;

  }
`;

const ColumnPriceHead = styled.div`
  text-align: center;
  font-size: 1.2vw;
  padding-right: 12vw;
  color: #C0C0C0;  
`;


const ImageContainer = styled.div`
  flex: 0 0 auto; /* Фиксированная ширина для картинки */
  margin-left: 5vw;
  margin-bottom: 5vw;
  width: 15vw;
  height: 120px;

  @media (max-width: 768px) {
    width: 25%;
    height: auto; /* Позволяем масштабироваться */
    display: flex;
    align-items: center;
  }

  @media (max-width: 1200px) {
  margin-bottom: 3vw;
  }
`;

const DetailsContainer = styled.div`
 display: grid;
  grid-template-columns: 3fr 1fr 1fr 1fr; /* Три колонки: название, описание и дополнительные элементы */
  column-gap: 2vw; /* Расстояние между колонками */
  align-items: center; /* Центрируем элементы по вертикали */
  max-width: 100%; 

  @media (max-width: 768px) {
    display: flex;
    flex-direction: column; /* Столбик для деталей */
    align-items: flex-start;
    flex: 2; /* Делаем шире в мобильной версии */
    gap: 15px;
    margin-top:-2vw;
  }

    @media (max-width: 630px) {
    gap: 10px;
    margin-top:0vw;
  }

    @media (max-width: 520px) {
    gap: 5px;
    margin-top:0vw;
  }
     @media (max-width: 420px) {
    gap: 1px;
    margin-top:2vw;
  }


`;
const RemoveButtonContainer = styled.div`
  flex: 0 0 auto;
  position: static; /* Обычное позиционирование на десктопе */

  @media (max-width: 768px) {
    position: absolute;
    top: 1vw;
    right: -4vw;
  }
`;

const SingleSize = styled.div`
  width: 8.6vw; /* Совпадает с StyledSelect */
  height: 4.5vw; /* Совпадает с StyledSelect */
  font-size: 1.2vw;
  margin-top: 0vw;
  font-family: NEXT ART;
  text-align: center;
  background-color: transparent;
  color: #C0C0C0;  
  display: flex;
  align-items: center;
  justify-content: center;

   @media (max-width: 768px) {
    margin-top: 4vw;
    margin-bottom: 4vw;
    margin-left: 4vw;
    font-size: 2vw;
    width: 100%;
  }
`;


const ColumnPrice = styled.div`
  margin-top: -1vw;
  text-align: right;
  font-weight: bold;
  font-size: 1.1vw;

    @media (max-width: 768px) {
 
    font-size: 2.3vw;
  }


`;

const TitleCompoundWrapper = styled.div`
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-grow: 1; 
  height: 100%; 
  gap: 0.5vw;

   @media (max-width: 768px) {
   gap: 3vw;
   margin-bottom: 3vw;
}

     @media (max-width: 420px) {
     gap: 0vw;
}


`;

const ProductTitle = styled.div`
  font-weight: bold;
  color: #313131;
  font-size: 1.2vw;
  text-align: left; 
  max-width: 100%;

 @media (max-width: 768px) {
      height: 50px;
      font-size: 3vw;
      margin-bottom: -4vw;
    }
`;

const ProductCompound = styled.p`
  font-size: 1vw;  
  color: #C0C0C0;
  text-align: left; /* Выравнивание текста */
  margin: 0; /* Убираем лишние отступы */
  word-wrap: break-word; 
  overflow-wrap: anywhere; 

   @media (max-width: 768px) {
      font-size: 2vw;
    }
`;

const StyledBackButton = styled.div`
  top: 30px;
  z-index: 10;

    display: flex; /* Включаем Flexbox */
  justify-content: center; /* Горизонтальное центрирование */

  button {
    font-size: calc(0.8vw + 5px);
    font-family: 'Fira Mono', monospace;
    background-color: ${theme.mainBackgroundColor};
    color: ${theme.mainTextColor};
    border-radius: 8px;
    padding: 8px 16px;

    &::after {
      content: ''; /* Обязательно для псевдоэлемента */
      position: absolute;

     bottom: 10px; /* Располагаем под текстом */
      width: 80%; 
      height: 1px; /* Толщина линии */
      background-color: #C0C0C0; 
    }
    &:hover {
      background-color: transparent;
      color: ${theme.secondaryTextColor};
      box-shadow: none;
    }
      @media (max-width: 768px) {
    font-size: calc(1.2vw + 5px);
    }
  }

    
`;


const StyledSelect = styled(Select)`
  && {
    width: 8.6vw; 
    height: 4vw; 
    box-sizing: border-box;
    font-size: 1vw;
    font-weight: bold;
    font-family: NEXT ART;
    text-align: center;
    border: 1px solid rgba(209, 209, 209, 0.5); 
    
    background-color: transparent; 
    box-shadow: none; 
    padding: 0px 10px;

    & .MuiOutlinedInput-notchedOutline {
      border: none;
    }

  

    &:focus-visible {
      outline: none;
    }

    & .MuiSelect-icon {
      margin-right: 8px;
      width: 18px;
      height: 18px;
    }

    & .MuiSelect-select {
      color: rgba(0, 0, 0, 0.87);
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: normal;
    }

    @media (max-width: 768px) {
      height: 8vw;
      width: 30vw;
      font-size: 2.5vw;
      margin-bottom: 3vw;


      & .MuiSelect-select {
            margin-left: -10vw;
}

    }

  }
`;

const BasketTitle = styled.h1`
  font-size: 2.5vw;
  font-weight: 700;
  margin-bottom: 30px;
  text-align: center;

 @media (max-width: 768px) {
  font-size: 3.5vw;
  }

`;

const EmptyBasket = styled.div`
  font-size: 2.5vw;  
  margin-top: 20px;
  display: flex;
  align-items:center; 
  justify-content: center;
`;

const BasketTable = styled.div`
  width: 100%;
`;

const TableHeader = styled.div`
  display: grid;
  width: 90%;
  grid-template-columns: 1.1fr 0.5fr 0.5fr 0.5fr;
  margin-left: 10vw;
  padding: 15px;
  font-size: 10vw;

   @media (max-width: 768px) {
    display: none; /* Скрываем названия столбцов на мобильных */
  }



`;

const TableRow = styled.div`
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20px 0;
  margin-left: 5vw;
  width: 90%;
  justify-content: space-between;

   @media (max-width: 768px) {
    display: flex; /* Меняем с grid на flex */
    flex-direction: row; /* Структура превращается в столбец */
    gap:20vw;
    position: relative; /* Для позиционирования кнопки удаления */
  }
 
 

`;


const Column = styled.div`
  text-align: center;
  font-size: 1vw;
  color: #C0C0C0;   

`;

const ColumnProduct = styled(Column)`
  text-align: left; 
  font-size: 1.2vw;

`;

const ColumnSize = styled.div`
  text-align: center;
  font-size: 1.2vw;
  padding-left: 4vw;
  color: #C0C0C0; 
  
  @media (max-width: 1200px) {
  padding-left: 1vw;
  }
`


const SelectorsColumn = styled.div`
  display: flex;
  gap: 20px;

  @media (max-width: 768px) {
    flex-direction: column;
    gap: 10px;
  }
`;




const ProductImage = styled.img`
  width: 10vw;
  height: auto;
  object-fit: cover;

  @media (max-width: 768px) {
    width: 30vw;
    height: auto;
  }
    @media (min-width: 930px){
    width: 8vw;
    }
    @media (min-width: 1100px){
    width: 8vw;
    }
`;


const QuantityWrapper = styled.div`
  display: flex;
  justify-content: center; /* Центрируем по горизонтали */
  padding: 10px 0;

  @media (max-width: 768px) {
    justify-content: space-between; /* Меняем выравнивание для небольших экранов */
    padding: 5px 0;
  }
`;

const QuantityControl = styled.div`
    width: 8.6vw; 
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(209, 209, 209, 0.5);
  padding: 10px 10px;
  justify-content: center;
  height: 4vw;
  box-sizing: border-box;

  @media (max-width: 768px) {
      height: 8vw;
      width: 30vw;
            margin-bottom: 3vw;


  }
`;

const QuantityButton = styled(Button)`
  && {
    background-color: transparent;
    color: #C0C0C0;   
    min-width: 40px;
    min-height: 40px;
    font-size: 1.5vw;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
     margin-left: 0.5vw;
     margin-right: 0.5vw;

   
     @media (max-width: 1200px) {
      font-size: 2vw;
      margin-left:-0.5vw;
      margin-right:-0.5vw;
    }

    @media (max-width: 1100px) {
      font-size: 2vw;
      margin-left:-1vw;
      margin-right:-1vw;
    }

    @media (max-width: 1000px) {
      font-size: 2vw;
      margin-left:-1vw;
      margin-right:-1vw;
    }

     @media (max-width: 768px) {
      font-size: 3vw;
      margin-left: 5vw;
      margin-right: 5vw;
    }

      @media (max-width: 658px) {
      font-size: 3vw;
      margin-left: 3vw;
      margin-right: 3vw;
    }
         @media (max-width: 508px) {
      font-size: 3vw;
      margin-left: 1vw;
      margin-right: 1vw;
    }
  }
`;

const Quantity = styled.span`
  font-size: 1.3vw;
  color: #333;
  font-weight: normal;
  text-align: center;

  @media (max-width: 768px) {
    font-size: 3vw;
  }
`;
export const RemoveButton = styled(Button)`
  &&{
    margin-bottom: 1vw;
    margin-left: 2vw;
    color: #C0C0C0;
    font-size: 2vw;

    &:hover {
      background-color: transparent;
      color: black;
    }
    @media (max-width: 768px) {
      font-size: 5vw;
       margin-bottom: 2vw;
       margin-left: 5vw;
    }
}
  
`;

const SummaryDiv = styled.div`
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  width: 100%;
  align-items: center;
  justify-content: space-around;
`;

const TotalText = styled.span`
  font-size: 1.3vw;
  font-family: 'Fira Mono', monospace;
  font-weight: normal;


      @media (max-width: 768px) {
      font-size: 3vw;
}

      @media (max-width: 1000px) {
      font-size: 1.8vw;
     }
`;

const StyledButton = styled(Button)`
  && {
    font-size: 1.3vw;
    background-color: ${theme.mainBackgroundColor};
    color: ${theme.mainTextColor};
    border-radius: 8px;
    padding: 8px 16px;
    font-family: "Fira Mono", monospace;
    font-weight: normal;


    &:hover {
      background-color: transparent;
      color: ${theme.mainTextColor};
      box-shadow: none;
    }
         &::after {
      content: ''; /* Обязательно для псевдоэлемента */
      position: absolute;

     bottom: 10px; /* Располагаем под текстом */
      width: 85%; 
      height: 1px; /* Толщина линии */
      background-color: #C0C0C0; 
    }

   

          @media (max-width: 768px) {
      font-size: 3vw;
     }

     @media (max-width: 1000px) {
      font-size: 1.8vw;
     }


  }

  
`;

const StyledFooter = styled.div`
  display: flex;
  justify-content: center; /* Центрируем содержимое горизонтально */
  align-items: center; /* Центрируем содержимое вертикально */
  gap: 10px; /* Расстояние между текстом и кнопкой */
  margin-top: 20px; /* Отступ сверху */
`;





export default Basket;




import React from 'react';
import styled from 'styled-components';
import { theme } from '../../_globalStyles/theme';

const StyledPageWrapper = styled.div`
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* Обеспечивает, чтобы страница занимала всю высоту окна */
`;

const StyledMainContent = styled.main`
  flex-grow: 1; /* Основной контент будет расти, занимая доступное пространство */
`;

const StyledFooter = styled.footer`
  font-family: 'NEXT ART', sans-serif !important;
  font-weight: 500;
  line-height: 1.5;
  padding-top: 92px;
  padding-bottom: 38px;
  min-height: 153px;
  display: flex;
  justify-content: center;
  & > div {
    display: flex;
    justify-content: space-around;
    width: 92.6%;
    border-bottom: thin solid ${theme.underlining};
  }
  
  small {
    display: inline-block;
    width: fit-content;
  }
`;

const SocialMedia = styled.div`
  width: fit-content;
`;

const media = {
  inst: 'instagram',
  tg: 'telegram'
};

type Props = {};

export const Footer = (props: Props) => (
  <StyledFooter>
    <div>
      <SocialMedia>
        <span>{media.inst.toUpperCase()} </span>
        <span>{media.tg.toUpperCase()}</span>
      </SocialMedia>
      <small>© 2023 VYACHESLÁVNA BRAND</small>
    </div>
  </StyledFooter>
);

const StyledBasket = styled.div`
  font-family: 'NEXT ART', sans-serif !important;
  font-weight: 500;
  line-height: 1.5;
  button {
    font-family: 'Fira Mono', monospace;
  }
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  padding: 20px;
`;

const StyledForm = styled.form`
  flex-grow: 1;
  width: 70%;
  font-family: 'NEXT ART', sans-serif !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: auto auto;
  padding: 20px;

  button {
    font-family: 'Fira Mono', monospace;
  }

  input {
    font-family: 'NEXT ART', sans-serif !important;
  }
`;

export const PageWrapper = () => (
  <StyledPageWrapper>
    <StyledMainContent>
      {/* Ваш основной контент */}
      <StyledBasket>
        <StyledForm>
          {/* Форма или другие элементы */}
        </StyledForm>
      </StyledBasket>
    </StyledMainContent>

    <Footer />
  </StyledPageWrapper>
);



import React, {useEffect, useState} from 'react';
import {Route, Routes, Navigate} from 'react-router-dom';
import {Basket} from './pages/basket/Basket';
import {HomePage} from './pages/homePage/HomePage';
import {Navigation} from './components/navigator/Navigator';
import ProductDetail from "./pages/productDetail/ProductDetail";
import {PageNotFound} from "./components/404/PageNotFound";
import {Footer} from "./components/footer/Footer";
import {BasketProvider} from './pages/basket/BasketContext';
import styled from "styled-components";
import OrderForm from "./pages/orderForm/OrderForm";
import PaymentStatus from "./pages/paymentStatus/PaymentStatus";
import useProducts, {ProductType} from "./store/useProducts";
import Loading from "./pages/loading/Loading";

function App() {
	const [products, setProducts] = useProducts();  // Хук для работы с продуктами
	const [loading, setLoading] = useState(true);   // Индикатор загрузки
	const [error, setError] = useState('');         // Переменная для хранения ошибки

	// Эффект для загрузки данных
	useEffect(() => {
		async function fetchProducts() {
			try {
				const response = await fetch('https://vyacheslavna.ru/products.php'); // URL для загрузки данных с сервера
				if (!response.ok) {
					throw new Error(`HTTP error! status: ${response.status}`);
				}
				const data: ProductType[] = await response.json();
				setProducts(data);  // Устанавливаем данные продуктов с сервера
			} catch (e) {
				if (e instanceof Error) {
					setError(e.message);
				} else {
					setError('An unexpected error occurred');
				}
			} finally {
				setLoading(false);
			}
		}

		fetchProducts();
	}, []);

	const AppRender = () => {
		return (
			<BasketProvider>
				<StyledApp className="App">
					<Navigation/>
					<Routes>
						<Route path="/" element={<HomePage products={products}/>}/>
						<Route path="/basket" element={<Basket/>}/>
						<Route path="/order" element={<OrderForm/>}/>
						<Route path="/product/:id" element={<ProductDetail products={products}/>}/>
						<Route path="/order/payment-status/:orderId" element={<PaymentStatus/>}/>
						<Route path="/404" element={<PageNotFound/>}/>
						<Route path="*" element={<Navigate to="/404"/>}/>
					</Routes>
					<Footer/>
				</StyledApp>
			</BasketProvider>
		)
	}

	// Отображение загрузки
	if (loading) {
		return (
			<BasketProvider>
				<StyledApp>
					<Navigation/>
					<Loading/>
				</StyledApp>
			</BasketProvider>
		)
	}

	// Временное решения для локального тестирования
	if (error) {
		return (
			<>
				<AppRender/>
				<ErrorP>Режим ошибки</ErrorP>
			</>
		);
	}

	return <AppRender/>
}

export default App;

const StyledApp = styled.div`
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 20px);
`;

const ErrorP = styled.p`
	background-color: orange;
  color: red;
  z-index: 9;
  font-size: 50px;
  font-weight: 800;
  opacity: 0.4;
  font-family: "Fira Mono", monospace;
`;
import React from 'react';
import styled from "styled-components";
import { NavLink, useNavigate } from 'react-router-dom';
import { Button } from "@mui/material";
import { theme } from "../../_globalStyles/theme";
import logoA from '../../assets/images/logoA.svg';
import { useBasket } from "../../pages/basket/BasketContext";

export const Navigation = () => {
  const { basket } = useBasket(); 
  const navigate = useNavigate(); 

  return (
    <GeneralDiv>
      <DivForButton>

        <LogoLink to="/">
          <Logo src={logoA} alt="logo" />
        </LogoLink>

        <StyleDivForButton>
         
          <StyledButton
            sx={{ textTransform: 'none' }}
            variant="text"
            size="small"
          >
            <StyledNavLink to="/basket">Корзина/</StyledNavLink>
          </StyledButton>
        </StyleDivForButton>
      </DivForButton>
    </GeneralDiv>
  );
};

const GeneralDiv = styled.div`
  height: 65px;
  width: 100%;
  background-color: ${theme.mainBackgroundColor};
  display: flex;
  align-items: center;
`;

const DivForButton = styled.div`
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between; 
  padding: 0 20px; 
`;

const StyleDivForButton = styled.div`
  display: flex;
  align-items: center;
  margin-left: auto; /* Убираем "прыгание" и гарантируем, что элемент будет прижат к правому краю */
  padding: 0 5px;
`;

const StyledButton = styled(Button)`
  && {
    font-family: "Fira Mono", monospace;
    text-decoration: none;
    background-color: ${theme.mainBackgroundColor};
    color: ${theme.mainTextColor};
    border-radius: 8px;
    padding-top: 2vw;
    z-index: 1000;
    font-size: calc(0.8vw + 5px);

     &::after {
      content: ''; /* Обязательно для псевдоэлемента */
      position: absolute;

     bottom: 7px; /* Располагаем под текстом */
      width: 90%; 
      height: 1px; /* Толщина линии */
      background-color: #C0C0C0; 
    }

    &:hover {
      background-color: transparent;
      color: ${theme.secondaryTextColor};
      box-shadow: none;
    }

     @media (max-width: 768px) {
    font-size: calc(1.2vw + 5px);
    }
  

  
`;

const LogoLink = styled(NavLink)`
  margin-right: 16px;
  margin-left: 70px;
  z-index: 1000;
  &:hover {
    cursor: pointer; /* Указываем, что ссылка кликабельна */
  }


   @media (max-width: 1200px) {
    margin-left: 6vw;
    margin-top: 3vw;
}

 @media (max-width: 1100px) {
    margin-left: 6vw;
    margin-top: 6vw;
}

   @media (max-width: 968px) {
    margin-left: 5vw;
    margin-top: 5vw;
  }

  @media (max-width: 868px) {

  }

  @media (max-width: 768px) {
    width: 6vw;
    margin-left: -8vw;
  }

  @media (max-width: 508px) {
    width: 9vw;
    margin-left: -10vw;
  }

 
`;

const Logo = styled.img`
  margin-top: 3vw;
  width: 4vw;
  margin-left: -4vw;


   @media (max-width: 3200px) {
    width: 3.5vw;
    margin-top: 3vw;
    margin-left: -2vw;
  }


   @media (max-width: 2900px) {
    width: 3.5vw;
    margin-top: 3vw;
    margin-left: -2vw;
  }


   @media (max-width: 2800px) {
    width: 3.5vw;
    margin-top: 3vw;
    margin-left: -2vw;
  }



 @media (max-width: 2400px) {
    width: 3.5vw;
    margin-top: 3vw;
    margin-left: -3vw;
  }


 @media (max-width: 2200px) {
    width: 3.5vw;
    margin-top: 3vw;
    margin-left: -3vw;
  }



  @media (max-width: 2000px) {
    width: 3.5vw;
    margin-top: 3vw;
    margin-left: -3vw;
  }




    @media (max-width: 1900px) {
    width: 3.5vw;
    margin-top: 3vw;
    margin-left: -3vw;
  }

   @media (max-width: 1800px) {
    width: 4vw;
    margin-top: 3vw;
    margin-left: -3vw;
  }

 @media (max-width: 1700px) {
    width: 3.5vw;
    margin-top: 2.5vw;
    margin-left: -3.5vw;
  }


  @media (max-width: 1600px) {
    width: 4vw;
    margin-top: 3vw;
    margin-left: -3vw;
  }




   @media (max-width: 1400px) {
    width: 4vw;
    margin-top: 3vw;
    margin-left: -4vw;
  }


   @media (max-width: 1300px) {
    width: 4.5vw;
    margin-top: 3vw;
    margin-left: -5vw;
  }

  @media (max-width: 1200px) {
    width: 5vw;
    margin-top: 0vw;
    margin-left: -5vw;
  }


   @media (max-width: 1100px) {
    width: 5vw;
    margin-top: -3vw;
  }

    @media (max-width: 968px) {
    width: 6vw;
    margin-top: -1vw;
    margin-left: -4vw;

  }

  @media (max-width: 868px) {
    width: 6vw;
    margin-left: -4vw;
    margin-top: -1vw;

  }

  @media (max-width: 768px) {
    width: 6vw;
    margin-left: 9vw;
    margin-top: -2vw;
  }

   @media (max-width: 608px) {
    width: 7vw;
    margin-left: 9vw;
  }

  @media (max-width: 508px) {
    width: 7.5vw;
    margin-top: -4vw;
    margin-left: 9vw;
  }

  @media (max-width: 408px) {
    width: 9vw;
    margin-left: 8vw;
    margin-top: -8vw;

  }
`;

const StyledNavLink = styled(NavLink)`
  font-family: "Fira Mono", monospace;
  text-decoration: none;
  color: inherit;
`;



как настроить код так чтобы - компонент баскет занимал 80%
навигатор сверху 10 и футер снизу 10