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,14 @@
 # Космическая бургерная
 
+## Начальный коммит
 Стартовый коммит проекта с помощью [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
+```
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,38 @@
+import { Logo, BurgerIcon, ListIcon, ProfileIcon } from '@ya.praktikum/react-developer-burger-ui-components';
+import styles from './app-header.module.css';
+
+function HeaderLink({ isActive, icon: Icon, children, href }) {
+    return (
+        <a href={href} className={`${styles.link} pt-4 pb-4 pr-5 pl-5`}>
+            <Icon type={isActive ? "primary" : "secondary"} />
+            <span className={`text text_type_main-default ml-2 ${isActive ? "text_color_primary" : "text_color_inactive"}`}>
+                {children}
+            </span>
+        </a>
+    )
+}
+
+function AppHeader() {
+    return (
+        <header className={`${styles.header} pt-4 pb-4`}>
+            <div className={styles.container}>
+                <nav className={styles.left}>
+                    <ul className={styles.list}>
+                        <li><HeaderLink href="/" icon={BurgerIcon} isActive={true}>Конструктор</HeaderLink></li>
+                        <li><HeaderLink href="/" icon={ListIcon} isActive={false}>Лента заказов</HeaderLink></li>
+                    </ul>
+                </nav>
+
+                <div className={styles.center}>
+                    <Logo />
+                </div>
+
+                <div className={styles.right}>
+                    <HeaderLink href="/" icon={ProfileIcon} isActive={false}>Личный кабинет</HeaderLink>
+                </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,43 @@
+.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;
+}
+
+.link {
+    display: flex;
+    border-radius: var(--common-border-radius-s);
+    text-decoration: none;
+    transition: var(--common-transition);
+}
+
+.link:hover {
+    background: var(--background-element);
+}
diff --git a/src/components/app.jsx b/src/components/app.jsx
@@ -0,0 +1,21 @@
+import AppHeader from './app-header/app-header';
+import BurgerConstructor from './burger-constructor/burger-constructor';
+import BurgerIngredients from './burger-ingredients/burger-ingredients';
+import styles from './app.module.css';
+import { data } from '../utils/data';
+
+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.module.css b/src/components/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,67 @@
+import styles from './burger-constructor.module.css';
+import { Button, ConstructorElement, CurrencyIcon, DragIcon } from '@ya.praktikum/react-developer-burger-ui-components';
+import PropTypes from 'prop-types';
+
+function BurgerConstructor({ data }) {
+    const list = data.filter(item => item.type !== "bun");
+    const bun = data.find(item => item.name.includes("Краторная булка"));
+    return (
+        <section className={styles.section}>
+            <div className="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) => (
+                        <BurgerInnerItem text={item.name} price={item.price} thumbnail={item.image} key={index}/>
+                    ))}
+                </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">{bun.price * 2 + list.reduce((sum, item) => sum += item.price, 0)}</div>
+                <div className={`${styles['total-icon']} mr-10`}><CurrencyIcon type="primary" /></div>
+                <Button htmlType="button" type="primary">Оформить заказ</Button>
+            </div>
+        </section>
+    );
+}
+
+BurgerConstructor.propTypes = {
+    data: PropTypes.array //более точная проверка во вложенном компоненте
+}
+
+function BurgerInnerItem({ text, price, thumbnail }) {
+    return (
+        <li className={`${styles['list-item']} mt-4`}>
+            <span className={styles.draggable}><DragIcon type="primary" /></span>
+            <ConstructorElement
+                text={text}
+                price={price}
+                thumbnail={thumbnail}
+                extraClass={`${styles.ingredient} ml-2`}
+            />
+        </li>
+    );
+}
+
+BurgerInnerItem.propTypes = {
+    text: PropTypes.string.isRequired,
+    price: PropTypes.number.isRequired,
+    thumbnail: PropTypes.string.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,72 @@
+.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: 364px;
+    }
+
+}
+
+@media (max-height: 850px) {
+    .scroll {
+        max-height: 264px;
+    }
+
+}
+
+@media (max-height: 750px) {
+    .scroll {
+        max-height: 174px;
+    }
+
+}
+
+.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;
+}