Table

src/components/FilterItem/FilterItem.js

@@ -0,0 +1,16 @@
+import React from "react";
+
+import arrow from "../../assets/images/select.svg"
+
+import "./filterItem.scss";
+
+const FilterItem = ({title}) => {
+    return (
+        <div className="filterItem">
+            <p>{title}</p>
+            <img src={arrow} alt="arrow" />
+        </div>
+    );
+};
+
+export default FilterItem;

src/components/FilterItem/filterItem.scss

@@ -0,0 +1,11 @@
+.filterItem {
+  display: flex;
+  column-gap: 8px;
+  padding: 5px 10px;
+  border-radius: 5px;
+  background-color: white;
+  align-items: center;
+  cursor: pointer;
+  width: 150px;
+  justify-content: space-between;
+}

src/pages/Home/Home.js

@@ -1,16 +1,119 @@
 import React from "react";
 
 import BreadCrumbs from "../../components/BreadCrumbs/BreadCrumbs";
+import FilterItem from "../../components/FilterItem/FilterItem";
+
+import loupe from "../../assets/images/loupe.png"
+import filterImg from "../../assets/images/filter.png"
+import cross from "../../assets/images/close.png"
+import edit from "../../assets/images/edit.png"
+import arrow from "../../assets/images/select.svg"
 
 import "./home.scss"
 
 const Home = () => {
+    const filterItems = ["Товарная группа", "Статус аукциона", "Новая заявка", "Выбрать период"]
+    const pagesMock = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+    const auctionItems = [
+        {
+            number: 324,
+            name: 'Аукцион на закупку в интересах компании ООО "Фабрика"',
+            receptionDate: '17.04.23-18.04.23',
+            startDate: '18.04.23',
+            status: 'Черновик'
+        },
+        {
+            number: 323,
+            name: 'Аукцион на закупку в интересах компании ООО "Пресс"',
+            receptionDate: '17.04.23-18.04.23',
+            startDate: '18.04.23',
+            status: 'Сбор заявок'
+        },
+        {
+            number: 322,
+            name: 'Аукцион на закупку в интересах компании ООО "Компания"',
+            receptionDate: '17.04.23-18.04.23',
+            startDate: '18.04.23',
+            status: 'Идут торги'
+        },
+        {
+            number: 321,
+            name: 'Аукцион на закупку в интересах компании ООО "Кот"',
+            receptionDate: '17.04.23-18.04.23',
+            startDate: '18.04.23',
+            status: 'В архиве'
+        },
+    ]
     return (
         <div className="home">
             <BreadCrumbs links={[
                 { name: "Главная", link: "/" },
             ]} />
             <h2 className="home__title">Аукционы</h2>
+            <div className="home__info">
+                <div className="info__top">
+                    <button>
+                        + Добавить аукцион
+                    </button>
+                    <div className="info__search">
+                        <input placeholder="Найти аукцион" type="text" />
+                        <img src={loupe} alt='loupe' />
+                    </div>
+                </div>
+                <div className="info__filters">
+                    <img className="info__filtersImg" src={filterImg} alt="filter" />
+                    <div className="info__filters__items">
+                        {filterItems.map((item) => {
+                          return <FilterItem title={item} key={item} />
+                        })}
+                    </div>
+                    <button className="filter__reset">
+                        <img src={cross} alt="cross" />
+                        Сбросить фильтры
+                    </button>
+                    <button className="filter__confirm">Применить</button>
+                </div>
+                <div className="info__tableWrapper">
+                    <table>
+                        <thead>
+                            <tr className="tableItem">
+                                <td>№</td>
+                                <td>Название аукциона</td>
+                                <td className="center">Прием заявок</td>
+                                <td className="center">Проведение</td>
+                                <td className="center">Статус</td>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {auctionItems.map((item) => {
+                              return <tr className="tableItem" key={item.number}>
+                                  <td>{item.number}</td>
+                                  <td className="tableItem__name">{item.name}</td>
+                                  <td className="center">{item.receptionDate}</td>
+                                  <td className="center">{item.startDate}</td>
+                                  <td className="center">{item.status}</td>
+                                  <td className="tableItem__edit">
+                                      <img src={edit} alt="edit" />
+                                  </td>
+                              </tr>
+                            })}
+                        </tbody>
+                    </table>
+                    <div className="table__pages">
+                        <img className="prev" src={arrow} alt="arrow" />
+                        {pagesMock.slice(0, 5).map((item) => {
+                            return <p className={item === 1 ? "active" : ""}>{item}</p>
+                        })}
+                        {pagesMock.length > 5 &&
+                            <>
+                                <span>...</span>
+                                <p>{pagesMock.length}</p>
+                            </>
+                        }
+                        <img className="next" src={arrow} alt="arrow" />
+                    </div>
+                </div>
+            </div>
         </div>
     );
 };

src/pages/Home/home.scss

@@ -1,5 +1,188 @@
 .home {
+  width: 100%;
+  padding-bottom: 100px;
   &__title {
     font-size: 40px;
   }
+
+  &__info {
+    width: 100%;
+    margin: 35px 0;
+    display: flex;
+    flex-direction: column;
+    row-gap: 15px;
+
+    .info {
+      &__top {
+        display: flex;
+        justify-content: space-between;
+
+        button {
+          background-color: #b6b6b6;
+          color: white;
+          cursor: pointer;
+          padding: 10px 20px;
+          border-radius: 8px;
+          border: none;
+        }
+      }
+
+      &__search {
+        display: flex;
+        padding: 5px 10px;
+        border-radius: 8px;
+        border: 2px solid gray;
+        max-width: 300px;
+        width: 100%;
+        align-items: center;
+
+        input {
+          border: none;
+          width: 100%;
+          outline: none;
+        }
+
+        img {
+          width: 18px;
+          height: 18px;
+        }
+      }
+
+      &__filters {
+        display: flex;
+        padding: 10px 15px;
+        background-color: #e6e6e6;
+        align-items: center;
+        justify-content: space-between;
+
+        &Img {
+          width: 20px;
+          height: 20px;
+        }
+
+        &__items {
+          display: flex;
+          column-gap: 10px;
+        }
+
+        button {
+          outline: none;
+          display: flex;
+          align-items: center;
+          color: white;
+          font-size: 17px;
+          padding: 7px 10px;
+          border-radius: 5px;
+          max-width: 200px;
+          border: none;
+          width: 100%;
+          cursor: pointer;
+          column-gap: 8px;
+          justify-content: center;
+
+          img {
+            width: 17px;
+            height: 17px;
+          }
+        }
+
+        .filter {
+          &__reset {
+            background-color: darkgrey;
+          }
+
+          &__confirm {
+            background-color: gray;
+          }
+        }
+      }
+      &__tableWrapper {
+
+        .tableItem {
+          padding: 10px;
+          border: 1px solid #cbcbcb;
+
+          &__name {
+            font-weight: 700;
+          }
+
+          .center {
+            text-align: center;
+          }
+
+          &__edit {
+            display: flex;
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            img {
+              width: 15px;
+              height: 15px;
+            }
+          }
+        }
+        table {
+          width: 100%;
+          font-size: 15px;
+          font-weight: 500;
+          display: flex;
+          flex-direction: column;
+          row-gap: 10px;
+
+          thead {
+            display: grid;
+
+            tr {
+              display: grid;
+              grid-template-columns: 7% 50% 16% 12% 10% 5%;
+            }
+          }
+
+          tbody {
+            display: grid;
+            row-gap: 10px;
+
+            tr {
+              display: grid;
+              grid-template-columns: 7% 50% 16% 12% 10% 5%;
+            }
+          }
+        }
+
+        .table {
+          &__pages {
+            display: flex;
+            margin-top: 15px;
+            column-gap: 8px;
+            align-items: center;
+
+            p {
+              cursor: pointer;
+              border-radius: 5px;
+              font-weight: 600;
+            }
+
+            .active {
+              color: white;
+              padding: 3px 7px;
+              background-color: #1d3bff;
+            }
+
+            img {
+              width: 20px;
+              height: 20px;
+              cursor: pointer;
+            }
+            .prev {
+              transform: rotate(90deg);
+            }
+
+            .next {
+              transform: rotate(-90deg);
+            }
+          }
+        }
+      }
+    }
+  }
 }