Commit c3bbb781 authored by AlexandrValgamov's avatar AlexandrValgamov
Browse files

Widget | feat: add shop-list page

parent 9ff06a3b
Loading
Loading
Loading
Loading
+1 −0
Original line number Diff line number Diff line
export * from './shop-list';
+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>
  );
};
+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;
  }
`;
+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>
  );
};
+1 −0
Original line number Diff line number Diff line
export * from './card-info';
Loading