miptleha · miptleha · Jan 12, 2023 · Jan 1, 2023 · Jan 6, 2023 · Jan 6, 2023
diff --git a/.gitignore b/.gitignore
@@ -21,3 +21,5 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+todo.txt
diff --git a/README.md b/README.md
@@ -1,4 +1,17 @@
 # Космическая бургерная
 
+## Начальный коммит
 Стартовый коммит проекта с помощью [CRA](https://create-react-app.dev/docs/getting-started) с добавленными UI компонентами от [Яндекс](https://github.com/Yandex-Practicum/react-developer-burger-ui-components).   
 Кода пока никакого не написано, это начальный коммит.
+
+## Спринт1
+### Шаг1
+Создали папку [src/components](src/components/), поместили туда app.js и 3 компонента: AppHeader, BurgerContructor и BurgerIngredients.   
+Данные с бургерами поместили в файл [src/utils/data.js](src/utils/data.js).  
+Делаем начальную верстку главной страницы приложения.
+```
+git checkout sprint1/step1
+```
+
+Обсуждение [замечаний](https://github.com/miptleha/react-burger/pull/1) от ревьювера.   
+Замечания были исправлены, было предложено продолжить оставшуюся верстку в sprint1/step2
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@ya.praktikum/react-developer-burger-ui-components": "^1.14.0",
+    "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -24,9 +24,9 @@
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
-    <title>React App</title>
+    <title>Космическая бургерная</title>
   </head>
-  <body>
+  <body class="body">
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
     <!--

diff --git a/src/App.css b/src/App.css
diff --git a/src/App.test.tsx b/src/App.test.tsx
diff --git a/src/App.tsx b/src/App.tsx
diff --git a/src/components/app-header/app-header.jsx b/src/components/app-header/app-header.jsx
@@ -0,0 +1,28 @@
+import styles from './app-header.module.css';
+import { Logo, BurgerIcon, ListIcon, ProfileIcon } from '@ya.praktikum/react-developer-burger-ui-components';
+import IconLink from '../icon-link/icon-link';
+
+function AppHeader() {
+    return (
+        <header className={`${styles.header} pt-4 pb-4`}>
+            <div className={styles.container}>
+                <nav className={styles.left}>
+                    <ul className={styles.list}>
+                        <li><IconLink href="/" icon={BurgerIcon} isActive>Конструктор</IconLink></li>
+                        <li><IconLink href="/" icon={ListIcon}>Лента заказов</IconLink></li>
+                    </ul>
+                </nav>
+
+                <div className={styles.center}>
+                    <Logo />
+                </div>
+
+                <div className={styles.right}>
+                    <IconLink href="/" icon={ProfileIcon}>Личный кабинет</IconLink>
+                </div>
+            </div>
+        </header>
+    );
+}
+
+export default AppHeader;
diff --git a/src/components/app-header/app-header.module.css b/src/components/app-header/app-header.module.css
@@ -0,0 +1,32 @@
+.header {
+    background: var(--background);
+}
+
+.container {
+    display: flex;
+    width: var(--width-outer);
+    margin: 0 auto;
+}
+
+.center {
+    flex: 0 0 content;
+}
+
+.left {
+    flex: 1 0 100px;
+    display: flex;
+    justify-content: flex-start;
+}
+
+.right {
+    flex: 1 0 100px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+.list {
+    margin: 0;
+    padding: 0;
+    display: flex;
+    list-style: none;
+}
diff --git a/src/components/app/app.jsx b/src/components/app/app.jsx
@@ -0,0 +1,21 @@
+import styles from './app.module.css';
+import { data } from '../../utils/data';
+import AppHeader from '../app-header/app-header';
+import BurgerConstructor from '../burger-constructor/burger-constructor';
+import BurgerIngredients from '../burger-ingredients/burger-ingredients';
+
+function App() {
+        return (
+            <>
+                <AppHeader/>
+                <main className={styles.main}>
+                    <div className={styles.inner}>
+                        <BurgerIngredients data={data}/>
+                        <BurgerConstructor data={data}/>
+                    </div>
+                </main>
+            </>
+        );
+}
+
+export default App;
diff --git a/src/components/app/app.module.css b/src/components/app/app.module.css
@@ -0,0 +1,12 @@
+.main {
+    margin: 0 auto;
+    width: var(--width-outer);
+}
+
+.inner {
+    margin-right: 20px;
+    margin-left: 20px;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
diff --git a/src/components/burger-constructor/burger-constructor.jsx b/src/components/burger-constructor/burger-constructor.jsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styles from './burger-constructor.module.css';
+import { dataPropTypes } from '../../utils/dataPropTypes';
+import { BUN } from '../../utils/dataNames';
+import { Button, ConstructorElement, CurrencyIcon, DragIcon } from '@ya.praktikum/react-developer-burger-ui-components';
+
+
+function BurgerConstructor({ data }) {
+    const list = React.useMemo(() => data.filter(item => item.type !== BUN), [data]);
+    const bun = React.useMemo(() => data.find(item => item.type === BUN), [data]);
+    const sum = React.useMemo(() => bun.price * 2 + list.reduce((sum, item) => sum += item.price, 0), [list, bun]);
+
+    return (
+        <section className={styles.section}>
+            <div className={`${styles.burger} mt-25 ml-4`}>
+                <ConstructorElement
+                    type="top"
+                    isLocked={true}
+                    text={`${bun.name} (верх)`}
+                    price={bun.price}
+                    thumbnail={bun.image}
+                    extraClass={`${styles.ingredient} ml-8`}
+                />
+                <ul className={`${styles.scroll} mt-4 mb-4`}>
+                    {list.map((item, index) => (
+                        <li className={`${styles['list-item']} mt-4`} key={index}>
+                            <span className={styles.draggable}><DragIcon type="primary" /></span>
+                            <ConstructorElement
+                                text={item.name}
+                                price={item.price}
+                                thumbnail={item.image}
+                                extraClass={`${styles.ingredient} ml-2`}
+                            />
+                        </li>
+                    ))}
+                </ul>
+                <ConstructorElement
+                    type="bottom"
+                    isLocked={true}
+                    text={`${bun.name} (низ)`}
+                    price={bun.price}
+                    thumbnail={bun.image}
+                    extraClass={`${styles.ingredient} ml-8`}
+                />
+            </div>
+
+            <div className={`${styles.total} mr-4 mt-10`}>
+                <div className="text text_type_digits-medium mr-2 mb-1">{sum}</div>
+                <div className={`${styles['total-icon']} mr-10`}><CurrencyIcon type="primary" /></div>
+                <Button htmlType="button" type="primary">Оформить заказ</Button>
+            </div>
+        </section>
+    );
+}
+
+BurgerConstructor.propTypes = {
+    data: PropTypes.arrayOf(dataPropTypes.isRequired).isRequired
+}
+
+export default BurgerConstructor;
diff --git a/src/components/burger-constructor/burger-constructor.module.css b/src/components/burger-constructor/burger-constructor.module.css
@@ -0,0 +1,83 @@
+.section {
+    flex: 0 0 600px;
+}
+
+.scroll {
+    overflow-y: auto;
+    max-height: 464px;
+    scrollbar-width: thin;
+    scrollbar-color: #8585AD #2F2F37;
+    padding: 0;
+    list-style: none;
+}
+
+.scroll::-webkit-scrollbar {
+    background-color: #2F2F37;
+    width: 8px;
+}
+
+.scroll::-webkit-scrollbar-thumb {
+    background-color: #8585AD;
+}
+
+.scroll > :first-child {
+    margin-top: 0;
+}
+
+@media (max-height: 950px) {
+    .scroll {
+        max-height: 370px;
+    }
+}
+
+@media (max-height: 850px) {
+    .scroll {
+        max-height: 270px;
+    }
+}
+
+@media (max-height: 750px) {
+    .scroll {
+        max-height: 175px;
+    }
+}
+
+.burger {
+    padding: 0;
+}
+
+@media (max-height: 650px) {
+    .burger {
+        margin-top: 30px;
+    }
+
+    .total {
+        margin-top: 16px;
+    }
+}
+
+.list-item {
+    display: flex;
+    align-items: center;
+}
+
+.ingredient {
+    background: var(--background);
+}
+
+.draggable {
+    cursor: grabbing;
+}
+
+.total {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.total-icon {
+    transform: scale(1.5);
+    transform-origin: top left;
+    width: 36px;
+    height: 32px;
+}
diff --git a/src/components/burger-ingredients-item/burger-ingredients-item.jsx b/src/components/burger-ingredients-item/burger-ingredients-item.jsx
@@ -0,0 +1,24 @@
+import PropTypes from 'prop-types';
+import styles from './burger-ingredients-item.module.css';
+import { CurrencyIcon } from '@ya.praktikum/react-developer-burger-ui-components';
+
+function BurgerIngredientItem({ img, title, price }) {
+    return (
+        <li className={`${styles.card} mt-6 mb-8 ml-3 mr-2`}>
+            <img className={`${styles['card-image']} ml-4 mr-4 mb-1`} src={img} alt={title} />
+            <div className={`${styles['card-price']} mb-1`}>
+                <span className="text text_type_digits-default mr-2">{price}</span>
+                <CurrencyIcon type="primary" />
+            </div>
+            <div className={`${styles['card-title']} text text_type_main-default`}>{title}</div>
+        </li>
+    );
+}
+
+BurgerIngredientItem.propTypes = {
+    img: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired
+}
+
+export default BurgerIngredientItem;