Table
This commit is contained in:
Mikola
parent
b49bc27872
commit
909611387e
BIN
src/assets/images/close.png
Normal file
BIN
src/assets/images/close.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 426 B |
BIN
src/assets/images/edit.png
Normal file
BIN
src/assets/images/edit.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
src/assets/images/filter.png
Normal file
BIN
src/assets/images/filter.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.7 KiB |
BIN
src/assets/images/loupe.png
Normal file
BIN
src/assets/images/loupe.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 24 KiB |
16
src/components/FilterItem/FilterItem.js
Normal file
16
src/components/FilterItem/FilterItem.js
Normal file
@ -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;
|
||||
11
src/components/FilterItem/filterItem.scss
Normal file
11
src/components/FilterItem/filterItem.scss
Normal file
@ -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;
|
||||
}
|
||||
@ -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>
|
||||
);
|
||||
};
|
||||
|
||||
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user