generated from IvettaGoIT/react_vite
-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #49 from MargoMarm/features/TableForDiaryOnMobile
Features/table for diary on mobile
- Loading branch information
Showing
6 changed files
with
270 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
112 changes: 112 additions & 0 deletions
112
src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,112 @@ | ||
import PropTypes from 'prop-types'; | ||
|
||
import sprite from '../../assets/sprite.svg'; | ||
|
||
import { DeleteBtn, DeleteIcon } from '../TableForDiary/TableForDiary.styled'; | ||
import { | ||
BottomContainer, | ||
Cell, | ||
CellValue, | ||
ContainerForTable, | ||
CustomContainer, | ||
} from './TableForDiaryOnMobile.styled'; | ||
|
||
const TableForDiaryOnMobile = ({ list, productTable, exerciseTable }) => { | ||
return ( | ||
<> | ||
{productTable && ( | ||
<CustomContainer> | ||
{list.map(item => ( | ||
<ContainerForTable key={item._id.$oid}> | ||
<Cell> | ||
Title<CellValue>{item.title}</CellValue> | ||
</Cell> | ||
|
||
<Cell> | ||
Category<CellValue>{item.category}</CellValue> | ||
</Cell> | ||
|
||
<BottomContainer> | ||
<Cell> | ||
Calories <CellValue>{item.calories}</CellValue> | ||
</Cell> | ||
|
||
<Cell> | ||
Weight <CellValue>{item.weight}</CellValue> | ||
</Cell> | ||
|
||
<Cell> | ||
Recommend <CellValue before>{'YES'}</CellValue> | ||
</Cell> | ||
|
||
<Cell> | ||
{' '} | ||
<CellValue> | ||
<DeleteBtn> | ||
<DeleteIcon> | ||
<use href={sprite + `#icon-trash`}></use> | ||
</DeleteIcon> | ||
</DeleteBtn> | ||
</CellValue> | ||
</Cell> | ||
</BottomContainer> | ||
</ContainerForTable> | ||
))} | ||
</CustomContainer> | ||
)} | ||
|
||
{exerciseTable && ( | ||
<CustomContainer> | ||
{list.map(item => ( | ||
<ContainerForTable key={item.name}> | ||
<Cell> | ||
Body Part<CellValue>{item.bodyPart}</CellValue> | ||
</Cell> | ||
|
||
<Cell> | ||
Equipment<CellValue>{item.equipment}</CellValue> | ||
</Cell> | ||
|
||
<Cell> | ||
Name<CellValue>{item.name}</CellValue> | ||
</Cell> | ||
|
||
<BottomContainer> | ||
<Cell> | ||
Target <CellValue>{item.burnedCalories}</CellValue> | ||
</Cell> | ||
|
||
<Cell> | ||
Burned Calor..<CellValue>{item.time}</CellValue> | ||
</Cell> | ||
|
||
<Cell> | ||
Time <CellValue>{item.time}</CellValue> | ||
</Cell> | ||
|
||
<Cell> | ||
{' '} | ||
<CellValue> | ||
<DeleteBtn> | ||
<DeleteIcon> | ||
<use href={sprite + `#icon-trash`}></use> | ||
</DeleteIcon> | ||
</DeleteBtn> | ||
</CellValue> | ||
</Cell> | ||
</BottomContainer> | ||
</ContainerForTable> | ||
))} | ||
</CustomContainer> | ||
)} | ||
</> | ||
); | ||
}; | ||
|
||
TableForDiaryOnMobile.propTypes = { | ||
list: PropTypes.array, | ||
productTable: PropTypes.bool, | ||
exerciseTable: PropTypes.bool, | ||
}; | ||
|
||
export default TableForDiaryOnMobile; |
110 changes: 110 additions & 0 deletions
110
src/components/TableForDiaryOnMobile/TableForDiaryOnMobile.styled.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,110 @@ | ||
import styled from '@emotion/styled'; | ||
import { colors, mq } from '../../utils'; | ||
|
||
export const CustomContainer = styled.div` | ||
overflow: auto; | ||
margin-top: 22px; | ||
height: 254px; | ||
`; | ||
|
||
export const ContainerForTable = styled.div` | ||
padding-right: 14px; | ||
margin-bottom: 40px; | ||
height: auto; | ||
&:last-child { | ||
margin-bottom: 0; | ||
} | ||
`; | ||
|
||
export const BottomContainer = styled.div` | ||
display: flex; | ||
height: 64px; | ||
& > div { | ||
&:nth-of-type(1) { | ||
width: 81px; | ||
margin-right: 16px; | ||
} | ||
} | ||
& > div { | ||
&:nth-of-type(2) { | ||
width: 80px; | ||
margin-right: 16px; | ||
} | ||
} | ||
& > div { | ||
&:nth-of-type(3) { | ||
width: 76px; | ||
margin-right: 8px; | ||
& > p { | ||
&::before { | ||
${props => | ||
props.before && | ||
` | ||
content: ''; | ||
width: 14px; | ||
height: 14px; | ||
border-radius: 10px; | ||
background: #419b09; | ||
margin-right: 8px; | ||
`} | ||
} | ||
} | ||
} | ||
} | ||
& > div { | ||
&:nth-of-type(4) { | ||
& > p { | ||
padding: 0; | ||
margin-top: 35px; | ||
border: none; | ||
} | ||
} | ||
} | ||
`; | ||
|
||
export const Cell = styled.div` | ||
font-size: 12px; | ||
line-height: 1.5; | ||
color: ${colors.orange}; | ||
`; | ||
|
||
export const CellValue = styled.p` | ||
display: flex; | ||
align-items: center; | ||
margin-top: 8px; | ||
margin-bottom: 16px; | ||
padding: 10px 0 10px 14px; | ||
font-size: 14px; | ||
line-height: 1.29; | ||
border-radius: 12px; | ||
border: 1px solid ${colors.textWhite03}; | ||
color: ${colors.white}; | ||
&::before { | ||
${props => | ||
props.before && | ||
` | ||
content: ''; | ||
width: 14px; | ||
height: 14px; | ||
border-radius: 10px; | ||
background: #419b09; | ||
margin-right: 8px; | ||
`} | ||
} | ||
`; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters