Commit c3bbb781 authored by AlexandrValgamov's avatar AlexandrValgamov
Browse files

Widget | feat: add shop-list page

parent 9ff06a3b

src/components/shop-list/index.ts

0 → 100644
+1 −0
Original line number Diff line number Diff line 
export * from './shop-list';

src/components/shop-list/shop-list.tsx

0 → 100644
+20 −0
Original line number Diff line number Diff line 
'use client';



import { FC } from 'react';



import { Shop } from '@/interfaces';



import { ShopCard } from './ui';

import * as Styled from './styled';



interface IShopListProps {

  data: Shop[];

}



export const ShopList: FC<IShopListProps> = ({ data }) => {

  return (

    <Styled.ShopsContainer>

      {data?.map((shop) => <ShopCard key={shop.slug} shop={shop} />)}

    </Styled.ShopsContainer>

  );

};

src/components/shop-list/styled.tsx

0 → 100644
+51 −0
Original line number Diff line number Diff line 
import styled from 'styled-components';



import { devices } from '@/styles';



export const ShopsContainer = styled.div`

  display: grid;

  grid-template-columns: 1fr;

  grid-auto-rows: min-content;

  gap: 12px;

  width: 100%;

  height: calc(100% - 156px);

  max-height: 740px;

  padding-top: 19px;

  padding-bottom: 40px;

  overflow-y: auto;

  background-color: var(--white);

  scrollbar-width: none;

  -ms-overflow-style: none;



  &::-webkit-scrollbar {

    display: none;

  }



  @media ${devices.desktopMd} {

    max-height: 620px;

  }



  @media ${devices.desktop} {

    width: 361px;

    max-height: 500px;

  }



  @media ${devices.tablet} {

    grid-template-columns: min-content min-content;

    gap: 42px;

    width: 100%;

    height: calc(100vh - 200px);

    max-height: 100%;

    padding-top: 40px;

    padding-bottom: 100px;

  }



  @media ${devices.mobile} {

    grid-template-columns: 1fr;

    gap: 12px;

    width: 100%;

    height: calc(100vh - 180px);

    padding-top: 19px;

    padding-bottom: 40px;

  }

`;

src/components/shop-list/ui/card-info/card-info.tsx

0 → 100644
+69 −0
Original line number Diff line number Diff line 
'use client';



import { FC } from 'react';

import { Swiper, SwiperSlide } from 'swiper/react';



import { Icon } from '@/shared';

import { Shop } from '@/interfaces';



import * as Styled from './styled';

import '../styles/swiperStyles.css';



interface CardInfoProps {

  shop: Shop;

}



export const CardInfo: FC<CardInfoProps> = ({ shop }) => {

  return (

    <Styled.CardInfo>

      <Styled.Categories>

        <Swiper direction="horizontal" slidesPerView="auto" spaceBetween={20}>

          {shop.categories.map((category) => (

            <SwiperSlide key={category.id}>

              <Styled.Category>

                <Styled.CategoryLink

                  href={`/catalog/${shop.slug}/${category.category}`}

                >

                  <Icon

                    colorItem={shop.stylebook.secondColor}

                    iconName={category.icon}

                  />

                  <Styled.CategoryTitle>{category.name}</Styled.CategoryTitle>

                </Styled.CategoryLink>

              </Styled.Category>

            </SwiperSlide>

          ))}

        </Swiper>

        {/*

        <Slider

          spaceBetween={20}

          items={shop.categories.map((category) => (

            <Styled.Category key={category.id}>

              <Styled.CategoryLink

                href={`/catalog/${shop.slug}/${category.category}`}

              >

                <Icon

                  colorItem={shop.stylebook.secondColor}

                  iconName={category.icon}

                />

                <Styled.CategoryTitle>{category.name}</Styled.CategoryTitle>

              </Styled.CategoryLink>

            </Styled.Category>

          ))}

        /> */}

      </Styled.Categories>

      <Styled.TimeRange>

        <Styled.TimeRangeRow>

          <Styled.TimeRangeText>Пн-Пт</Styled.TimeRangeText>

          <Styled.Separator />

          <Styled.TimeRangeText>{`${shop.mode.weekday.start} - ${shop.mode.weekday.end}`}</Styled.TimeRangeText>

        </Styled.TimeRangeRow>

        <Styled.TimeRangeRow>

          <Styled.TimeRangeText>Сб-Вс</Styled.TimeRangeText>

          <Styled.Separator />

          <Styled.TimeRangeText>{`${shop.mode.free.start} - ${shop.mode.free.end}`}</Styled.TimeRangeText>

        </Styled.TimeRangeRow>

      </Styled.TimeRange>

    </Styled.CardInfo>

  );

};

src/components/shop-list/ui/card-info/index.ts

0 → 100644
+1 −0
Original line number Diff line number Diff line 
export * from './card-info';