burger-online

1
import {useSelector} from 'react-redux'
2
import {useLocation, useParams} from 'react-router-dom'
3
import ErrorPage from '../../pages/error-page'
4
import {ingredientsStore} from '../../redux/ingredients/slice'
5
import {TIngredient} from '../../types'
6
import styles from './ingredient-details.module.css'
7

8
const IngredientDetails = () => {
9
  const {id} = useParams()
10
  const {state} = useLocation()
11

12
  const {items} = useSelector(ingredientsStore)
13
  if (!items.length) return null
14

15
  const findItem = items.find((item: TIngredient) => item._id === id)
16
  const contentCenter = state?.background ? [styles.box] : [styles.box, styles.center]
17

18
  if (!findItem) return <ErrorPage />
19
  return (
20
    <figure className={styles.details}>
21
      <div className={contentCenter.join(' ')}>
22
        <h3 className='text text_type_main-large'>Детали ингридиента</h3>
23
      </div>
24
      <img className={styles.img} src={findItem.image} alt={findItem.name} />
25
      <figcaption>
26
        <h4 className='text text_type_main-medium mb-8'>{findItem.name}</h4>
27
        <ul className={`text text_type_main-default text_color_inactive ${styles.lists}`}>
28
          <li className={styles.list}>
29
            <p>Калории, калл</p>
30
            <p>{findItem.calories}</p>
31
          </li>
32
          <li className={styles.list}>
33
            <p>Белки, г</p>
34
            <p>{findItem.carbohydrates}</p>
35
          </li>
36
          <li className={styles.list}>
37
            <p>Жиры, г</p>
38
            <p>{findItem.fat}</p>
39
          </li>
40
          <li className={styles.list}>
41
            <p>Углеводы, г</p>
42
            <p>{findItem.proteins}</p>
43
          </li>
44
        </ul>
45
      </figcaption>
46
    </figure>
47
  )
48
}
49

50
export default IngredientDetails
51