61 done

d8283adb · Pavel Mishakov · d8283adb · d8283adb · d8283adb · d8283adb
Commit d8283adb authored Jun 03, 2025 by Pavel Mishakov
38 changed files
--- a/.gitignore
+++ b/.gitignore
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/README.md
+++ b/README.md
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default tseslint.config({
+  extends: [
+    // Remove ...tseslint.configs.recommended and replace with this
+    ...tseslint.configs.recommendedTypeChecked,
+    // Alternatively, use this for stricter rules
+    ...tseslint.configs.strictTypeChecked,
+    // Optionally, add this for stylistic rules
+    ...tseslint.configs.stylisticTypeChecked,
+  ],
+  languageOptions: {
+    // other options...
+    parserOptions: {
+      project: ['./tsconfig.node.json', './tsconfig.app.json'],
+      tsconfigRootDir: import.meta.dirname,
+    },
+  },
+})
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default tseslint.config({
+  plugins: {
+    // Add the react-x and react-dom plugins
+    'react-x': reactX,
+    'react-dom': reactDom,
+  },
+  rules: {
+    // other rules...
+    // Enable its recommended typescript rules
+    ...reactX.configs['recommended-typescript'].rules,
+    ...reactDom.configs.recommended.rules,
+  },
+})
+```
--- a/eslint.config.js
+++ b/eslint.config.js
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+)
--- a/index.html
+++ b/index.html
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
+{
+  "name": "classwork",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "react-router": "^7.6.1",
+    "react-router-dom": "^7.6.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.25.0",
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "eslint": "^9.25.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.19",
+    "globals": "^16.0.0",
+    "typescript": "~5.8.3",
+    "typescript-eslint": "^8.30.1",
+    "vite": "^6.3.5"
+  }
+}
--- a/public/vite.svg
+++ b/public/vite.svg
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
--- a/src/App.tsx
+++ b/src/App.tsx
+import { BrowserRouter, Route, Routes } from 'react-router'
+import BurgerBuilder from './components/BurgerBuilder/BurgerBuilder'
+import { Checkout } from './components/Checkout/Checkout'
+import { ContactData } from './components/ContactData/ContactData'
+
+function App() {
+  return (
+    <BrowserRouter>
+      <Routes>
+        <Route path='/' element={<BurgerBuilder />} />
+        <Route path='/checkout' element={<Checkout />}>
+          <Route path='contact-data' element={<ContactData />} />
+          <Route path='test' element={<h1>TESTING</h1>} />
+        </Route>
+        <Route path='*' element={<h1>Not found</h1>}  />
+      </Routes>
+    </BrowserRouter>
+  )
+}
+
+export default App
--- a/src/components/BuildControls/BuildControl/BuildControl.module.css
+++ b/src/components/BuildControls/BuildControl/BuildControl.module.css
+.BuildControl {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin: 5px 0;
+}
+
+.BuildControl button {
+  display: block;
+  font: inherit;
+  padding: 5px;
+  margin: 0 5px;
+  width: 80px;
+  border: 1px solid #aa6817;
+  cursor: pointer;
+  outline: none;
+}
+
+.BuildControl button:disabled {
+  background-color: #ac9980;
+  border: 1px solid #7e7365;
+  color: #ccc;
+  cursor: default;
+}
+
+.BuildControl button:hover:disabled {
+  background-color: #ac9980;
+  color: #ccc;
+  cursor: not-allowed;
+}
+
+.Label {
+  padding: 10px;
+  font-weight: bold;
+  width: 80px;
+  text-transform: capitalize;
+}
+
+.BuildControl .Less {
+  background-color: #d39952;
+  color: white;
+}
+
+.BuildControl .More {
+  background-color: #8f5e1e;
+  color: white;
+}
+
+.BuildControl .Less:hover,
+.BuildControl .Less:active {
+  background-color: #daa972;
+  color: white;
+}
+
+.BuildControl .More:hover,
+.BuildControl .More:active {
+  background-color: #99703f;
+  color: white;
+}
--- a/src/components/BuildControls/BuildControl/BuildControl.tsx
+++ b/src/components/BuildControls/BuildControl/BuildControl.tsx
+import { TIngredientNames } from '../../../types/TIngredientNames'
+import styles from './BuildControl.module.css'
+import { MouseEventHandler } from 'react'
+
+type Props = {
+    type: TIngredientNames
+    added: MouseEventHandler<HTMLButtonElement>
+    removed: MouseEventHandler<HTMLButtonElement>
+    disabled?: boolean
+}
+
+const BuildControl = ({type, added, removed, disabled}: Props) => {
+    return (
+        <div className={styles.BuildControl}>
+            <div className={styles.Label}>{type}</div>
+            <button disabled={!disabled} onClick={removed} className={styles.Less}>Less</button>
+            <button onClick={added} className={styles.More}>More</button>
+        </div>
+    )
+}
+
+export default BuildControl
\ No newline at end of file
--- a/src/components/BuildControls/BuildControls.module.css
+++ b/src/components/BuildControls/BuildControls.module.css
+.BuildControls {
+  width: 100%;
+  background-color: #cf8f2e;
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  box-shadow: 0 2px 1px #ccc;
+  margin: auto;
+  padding: 10px 0;
+}
+
+.OrderButton {
+    background-color: #dad735;
+    outline: none;
+    cursor: pointer;
+    border: 1px solid #966909;
+    color: #966909;
+    font-family: inherit;
+    font-size: 1.2em;
+    padding: 15px 30px;
+    box-shadow: 2px 2px 2px #966909;
+}
+
+.OrderButton:hover, .OrderButton:active {
+    background-color: #a0db41;
+    border: 1px solid #966909;
+    color: #966909;
+}
+.OrderButton:disabled {
+    background-color: #c7c6c6;
+    cursor: not-allowed;
+    border: 1px solid #ccc;
+    color: #888888;
+}
+
+.OrderButton:not(:disabled) {
+    animation: enable 0.3s linear;
+}
+
+@keyframes enable {
+    0% {
+        transform: scale(1);
+    }
+    60% {
+        transform: scale(1.1);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
\ No newline at end of file
--- a/src/components/BuildControls/BuildControls.tsx
+++ b/src/components/BuildControls/BuildControls.tsx
+import { TIngredients } from '../../types/TIngredients'
+import styles from './BuildControls.module.css'
+import BuildControl from './BuildControl/BuildControl'
+import { TIngredientNames } from '../../types/TIngredientNames'
+import { EIngredientPrices } from '../../enums/EIngredientPrices'
+import Modal from '../UI/Modal/Modal'
+import { useRef } from 'react'
+import OrderSummary from '../OrderSummary/OrderSummary'
+
+type Props = {
+    ingredients: TIngredients
+    price: number
+    ingredientAdded: (type: TIngredientNames) => void
+    ingredientRemoved: (type: TIngredientNames) => void
+}
+
+const BuildControls = ({ingredients, price, ingredientAdded, ingredientRemoved}: Props) => {
+    const modalRef = useRef<HTMLDialogElement>(null)
+
+    const showModalHandler = () => {
+        if(!modalRef.current) return
+        modalRef.current.showModal()
+    }
+
+    return (
+        <div className={styles.BuildControls}>
+            <p>Current Price: <strong>{price} ₸</strong></p>
+            {Object.keys(ingredients)
+            .map(ingType => {
+                return <BuildControl 
+                    key={ingType} 
+                    type={ingType as keyof typeof ingredients} 
+                    added={() => ingredientAdded(ingType as keyof typeof ingredients)}
+                    removed={() => ingredientRemoved(ingType as keyof typeof ingredients)}
+                    disabled={!!ingredients[ingType as keyof typeof ingredients]}
+                />
+            })
+            }
+            <button
+                disabled={price <= EIngredientPrices.bread} 
+                className={styles.OrderButton}
+                onClick={showModalHandler}
+             >
+                ORDER NOW
+            </button>
+            <Modal ref={modalRef}>
+                <OrderSummary 
+                    ingredients={ingredients}
+                    price={price}
+                />
+            </Modal>
+        </div>
+    )
+}
+
+export default BuildControls
\ No newline at end of file
--- a/src/components/Burger/Burger.module.css
+++ b/src/components/Burger/Burger.module.css
+.Burger {
+  width: 100%;
+  margin: auto;
+  height: 250px;
+  overflow: auto;
+  text-align: center;
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+
+@media (min-width: 1000px) and (min-height: 700px) {
+  .Burger {
+    width: 700px;
+    height: 600px;
+  }
+}
+
+@media (min-width: 500px) and (min-height: 401px) {
+  .Burger {
+    width: 450px;
+    height: 300px;
+  }
+}
+
+@media (min-width: 500px) and (max-height: 400px) {
+  .Burger {
+    width: 350px;
+    height: 200px;
+  }
+}
--- a/src/components/Burger/Burger.tsx
+++ b/src/components/Burger/Burger.tsx
+import { TIngredients } from "../../types/TIngredients"
+import styles from './Burger.module.css'
+import Ingredient from "../Ingredient/Ingredient"
+
+type Props = {
+    ingredients: TIngredients
+}
+
+const Burger = ({ingredients}: Props) => {
+    const ingList: React.ReactNode[] = []
+    Object.keys(ingredients)
+        .forEach((igKey: string) => {
+            let amount: number = ingredients[igKey as keyof typeof ingredients]
+            for (let i = 0; i < amount; i++) {
+                ingList.push(<Ingredient key={igKey + i} type={igKey as keyof typeof ingredients} />)
+            }
+        })
+    return (
+        <div className={styles.Burger}>
+            <Ingredient type="bread-top" />
+            {ingList.length 
+                ? 
+                    ingList 
+                :
+                    <p>Please start adding ingredients!</p>
+            }
+            <Ingredient type="bread-bottom" />
+        </div>
+    )
+}
+
+export default Burger
\ No newline at end of file
--- a/src/components/BurgerBuilder/BurgerBuilder.tsx
+++ b/src/components/BurgerBuilder/BurgerBuilder.tsx
+'use client'
+
+import { TIngredients } from "../../types/TIngredients"
+import { useState } from "react"
+import Burger from "../Burger/Burger"
+import BuildControls from "../BuildControls/BuildControls"
+import { TIngredientNames } from "../../types/TIngredientNames"
+import { EIngredientPrices } from "../../enums/EIngredientPrices"
+
+const BurgerBuilder = () => {
+    const [totalPrice, setTotalPrice] = useState<number>(EIngredientPrices.bread)
+    const [ingredients, setIngredients] = useState<TIngredients>({
+        salad: 0,
+        meat: 0,
+        bacon: 0,
+        cheese: 0
+    })
+
+    const addIngredientHandler = (type: TIngredientNames) => {
+        setIngredients(prevState => ({...prevState, [type]: prevState[type] + 1}))
+        setTotalPrice(prevState => prevState + EIngredientPrices[type])
+    }
+
+    const removeIngredientHandler = (type: TIngredientNames) => {
+        setIngredients(prevState => ({...prevState, [type]: Math.max(0, prevState[type] - 1)}))
+        setTotalPrice(prevState => prevState - EIngredientPrices[type])
+    }
+
+    return (
+        <>
+            <Burger ingredients={ingredients} />
+            <BuildControls 
+                ingredients={ingredients}
+                price={totalPrice}
+                ingredientAdded={addIngredientHandler}
+                ingredientRemoved={removeIngredientHandler}
+            />
+        </>
+    )
+}
+
+export default BurgerBuilder
\ No newline at end of file
--- a/src/components/Checkout/Checkout.tsx
+++ b/src/components/Checkout/Checkout.tsx
+import { useRef } from "react";
+import { TIngredients } from "../../types/TIngredients";
+import { CheckoutSummary } from "../CheckoutSummary/CheckoutSummary";
+import { useNavigate, useSearchParams } from "react-router-dom";
+
+
+
+
+export function Checkout() {
+    const [searchParams] = useSearchParams()
+    const ingredients = useRef(Object.fromEntries(searchParams) as unknown as TIngredients)
+
+    const navigate = useNavigate();
+
+    const checkoutCancelledHandler = () => {
+        navigate('/');
+    };
+
+    const checkoutContinuedHandler = () => {
+        navigate('contact-data');
+    };
+
+    return <CheckoutSummary 
+                ingredients={ingredients.current} 
+                checkoutContinued={checkoutContinuedHandler}
+                checkoutCancelled={checkoutCancelledHandler}
+            />;
+}
\ No newline at end of file
--- a/src/components/CheckoutSummary/CheckoutSummary.module.css
+++ b/src/components/CheckoutSummary/CheckoutSummary.module.css
+.CheckoutSummary {
+    text-align: center;
+    width: 80%;
+    margin: auto;
+}
+
+.CheckoutSummaryBurger {
+    width: 100%;
+    margin: auto;
+}
+
+@media (min-width: 600px) {
+    .CheckoutSummary {
+        width: 500px;
+    }
+}
\ No newline at end of file
--- a/src/components/CheckoutSummary/CheckoutSummary.tsx
+++ b/src/components/CheckoutSummary/CheckoutSummary.tsx
+import Burger from "../Burger/Burger";
+import { TIngredients } from "../../types/TIngredients";
+import Button from "../UI/Button/Button";
+import styles from "./CheckoutSummary.module.css";
+import { MouseEventHandler } from "react";
+import { Outlet } from "react-router-dom";
+
+interface Props {
+    ingredients: TIngredients;
+    checkoutContinued: MouseEventHandler<HTMLButtonElement>
+    checkoutCancelled: MouseEventHandler<HTMLButtonElement>
+}
+
+export function CheckoutSummary({ ingredients, checkoutContinued, checkoutCancelled }: Props) {
+    return (
+        <div className={styles.CheckoutSummary}>
+            <h1>We hope it tastes well!</h1>
+            <div className={styles.CheckoutSummaryBurger}>
+                <Burger ingredients={ingredients} />
+            </div>
+            <Button btnType="Danger" onClick={checkoutCancelled}>
+                CANCEL
+            </Button>
+            <Button btnType="Success" onClick={checkoutContinued}>
+                CONTINUE
+            </Button>
+            <Outlet />
+        </div>
+    );
+
+}
\ No newline at end of file
--- a/src/components/ContactData/ContactData.module.css
+++ b/src/components/ContactData/ContactData.module.css
+.ContactData {
+    margin: 20px auto;
+    width: 80%;
+    text-align: center;
+    box-shadow: 0 2px 3px #ccc;
+    border: 1px solid #eee;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.ContactData > form {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.Input {
+    display: block;
+}
+
+@media (min-width: 600px) {
+    .ContactData {
+        width: 500px;
+    }
+}
\ No newline at end of file
--- a/src/components/ContactData/ContactData.tsx
+++ b/src/components/ContactData/ContactData.tsx
+import Button from '../UI/Button/Button';
+import styles from './ContactData.module.css';
+
+export function ContactData() {
+ return (
+   <div className={styles.ContactData}>
+     <h4>Enter your Contact Data</h4>
+     <form>
+       <input className={styles.Input} type="text" name="name" placeholder="Your Name" />
+       <input className={styles.Input} type="email" name="email" placeholder="Your Mail" />
+       <input className={styles.Input} type="text" name="street" placeholder="Street" />
+       <input className={styles.Input} type="text" name="postal" placeholder="Postal Code" />
+       <Button onClick={() => {}} btnType="Success">
+         ORDER
+       </Button>
+     </form>
+   </div>
+ );
+}
\ No newline at end of file
--- a/src/components/Ingredient/Ingredient.module.css
+++ b/src/components/Ingredient/Ingredient.module.css
+.BreadBottom {
+  height: 13%;
+  width: 80%;
+  background: linear-gradient(#f08e4a, #e27b36);
+  border-radius: 0 0 30px 30px;
+  box-shadow: inset -15px 0 #c15711;
+  margin: 2% auto;
+}
+
+.BreadTop {
+  height: 20%;
+  width: 80%;
+  background: linear-gradient(#bc581e, #e27b36);
+  border-radius: 50% 50% 0 0;
+  box-shadow: inset -15px 0 #c15711;
+  margin: 2% auto;
+  position: relative;
+}
+
+.Seeds1 {
+  width: 10%;
+  height: 15%;
+  position: absolute;
+  background-color: white;
+  left: 30%;
+  top: 50%;
+  border-radius: 40%;
+  transform: rotate(-20deg);
+  box-shadow: inset -2px -3px #c9c9c9;
+}
+
+.Seeds1:after {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: white;
+  left: -170%;
+  top: -260%;
+  border-radius: 40%;
+  transform: rotate(60deg);
+  box-shadow: inset -1px 2px #c9c9c9;
+}
+
+.Seeds1:before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: white;
+  left: 180%;
+  top: -50%;
+  border-radius: 40%;
+  transform: rotate(60deg);
+  box-shadow: inset -1px -3px #c9c9c9;
+}
+
+.Seeds2 {
+  width: 10%;
+  height: 15%;
+  position: absolute;
+  background-color: white;
+  left: 64%;
+  top: 50%;
+  border-radius: 40%;
+  transform: rotate(10deg);
+  box-shadow: inset -3px 0 #c9c9c9;
+}
+
+.Seeds2:before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  background-color: white;
+  left: 150%;
+  top: -130%;
+  border-radius: 40%;
+  transform: rotate(90deg);
+  box-shadow: inset 1px 3px #c9c9c9;
+}
+
+.Meat {
+  width: 80%;
+  height: 8%;
+  background: linear-gradient(#7f3608, #702e05);
+  margin: 2% auto;
+  border-radius: 15px;
+}
+
+.Cheese {
+  width: 90%;
+  height: 4.5%;
+  margin: 2% auto;
+  background: linear-gradient(#f4d004, #d6bb22);
+  border-radius: 20px;
+}
+
+.Salad {
+  width: 85%;
+  height: 7%;
+  margin: 2% auto;
+  background: linear-gradient(#228c1d, #91ce50);
+  border-radius: 20px;
+}
+
+.Bacon {
+  width: 80%;
+  height: 3%;
+  background: linear-gradient(#bf3813, #c45e38);
+  margin: 2% auto;
+}
+
--- a/src/components/Ingredient/Ingredient.tsx
+++ b/src/components/Ingredient/Ingredient.tsx
+import { TIngredientNames } from '../../types/TIngredientNames'
+import styles from './Ingredient.module.css'
+
+type Props = {
+    type: TIngredientNames | 'bread-top' | 'bread-bottom'
+}
+
+const Ingredient = ({type}: Props) => {
+    switch (type) {
+    case 'bread-bottom':
+      return <div className={styles.BreadBottom} />;
+    case 'bread-top':
+      return (
+        <div className={styles.BreadTop}>
+          <div className={styles.Seeds1}/>
+          <div className={styles.Seeds2}/>
+        </div>
+      );
+    case 'meat':
+      return <div className={styles.Meat} />;
+    case 'cheese':
+      return <div className={styles.Cheese} />;
+    case 'salad':
+      return <div className={styles.Salad} />;
+    case 'bacon':
+      return <div className={styles.Bacon} />;
+    default:
+      return null;
+  }
+}
+
+export default Ingredient
\ No newline at end of file
--- a/src/components/OrderSummary/OrderSummary.module.css
+++ b/src/components/OrderSummary/OrderSummary.module.css
+.listItem {
+    text-transform: capitalize;
+}
+.list {
+    margin: 20px;
+}
+.formBlock {
+    display: flex;
+}
\ No newline at end of file
--- a/src/components/OrderSummary/OrderSummary.tsx
+++ b/src/components/OrderSummary/OrderSummary.tsx
+import { TIngredients } from "../../types/TIngredients"
+import styles from './OrderSummary.module.css'
+import Button from "../UI/Button/Button"
+import { FormEvent } from "react"
+import { useNavigate, createSearchParams, URLSearchParamsInit } from "react-router-dom"
+
+type Props = {
+    ingredients: TIngredients
+    price: number
+}
+
+const OrderSummary = ({ ingredients, price }: Props) => {
+
+    const navigate = useNavigate()
+    const ingredientSummary = Object.keys(ingredients).map((igKey) => {
+        return (
+            <li key={igKey}>
+                <span className={styles.listItem}>{igKey}</span>:{' '}
+                {ingredients[igKey as keyof typeof ingredients]}
+            </li>
+        );
+    });
+
+    const submit = (e: FormEvent) => {
+        e.preventDefault()
+        // {meat: 1, salad: 2 ...}
+        // .../chackout?uim=wefwef123
+        // .../chackout?meat=1&salad=2& ...
+
+        // meat=1&salad=2& ...
+        const params = createSearchParams(ingredients as unknown as URLSearchParamsInit);
+        navigate({
+            pathname: '/checkout',
+            search: `?${params.toString()}`
+        })
+    }
+
+    return (
+        <>
+            <h3>Your order</h3>
+            <p>A delicious burger with the following ingredients:</p>
+            <ul className={styles.list}>{ingredientSummary}</ul>
+            <p>
+                <strong>Total Price: {price} ₸</strong>
+            </p>
+            <p>Continue to checkout?</p>
+            <div className={styles.formBlock}>
+                <form>
+                    <Button formMethod="dialog" btnType="Danger">CLOSE</Button>
+                </form>
+                <form onSubmit={submit}>
+                    <Button btnType="Success">CONTINUE</Button>
+                </form>
+            </div>
+        </>
+    );
+}
+
+export default OrderSummary
\ No newline at end of file
--- a/src/components/UI/Button/Button.module.css
+++ b/src/components/UI/Button/Button.module.css
+
+.Button {
+    border: none;
+    color: white;
+    outline: none;
+    cursor: pointer;
+    font: inherit;
+    padding: 10px;
+    margin: 10px;
+    font-weight: bold;
+}
+
+.Success {
+    background-color: #5C9210;
+}
+
+.Danger {
+    background-color: #944317;
+}
\ No newline at end of file
--- a/src/components/UI/Button/Button.tsx
+++ b/src/components/UI/Button/Button.tsx
+import type { MouseEventHandler, ReactNode } from 'react';
+import styles from './Button.module.css'
+
+type Props = {
+ onClick?: MouseEventHandler<HTMLButtonElement>;
+ btnType: 'Success' | 'Danger';
+ children: ReactNode;
+ formMethod?: string
+}
+
+const Button = ({onClick, btnType, children, formMethod}: Props) => {
+ return (
+   <button formMethod={formMethod} onClick={onClick} className={`${styles.Button} ${styles[btnType]}`}>
+     {children}
+   </button>
+ );
+}
+
+export default Button
\ No newline at end of file
--- a/src/components/UI/Modal/Modal.module.css
+++ b/src/components/UI/Modal/Modal.module.css
+.Modal {
+    margin: auto;
+    background-color: white;
+    width: 70%;
+    border: 1px solid #ccc;
+    box-shadow: 1px 1px 1px black;
+    padding: 16px;
+    box-sizing: border-box;
+    color: black;
+    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
+    animation: close 0.5s forwards;
+    &[open] {
+        animation: open 0.5s forwards;
+    }
+}
+
+.Modal::backdrop {
+    background-color: rgba(0,0,0,0.5);
+}
+
+@media (min-width: 600px) {
+    .Modal {
+        width: 500px;
+    }
+}
+
+@keyframes open {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes close {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
\ No newline at end of file
--- a/src/components/UI/Modal/Modal.tsx
+++ b/src/components/UI/Modal/Modal.tsx
+import styles from './Modal.module.css'
+
+type Props = {
+    children: React.ReactNode
+    ref: React.RefObject<HTMLDialogElement | null>
+}
+
+const Modal = ({children, ref}: Props) => {
+
+    const backdropCloseHandler = (e: React.MouseEvent) => {
+        const dialogDimentions = ref.current?.getBoundingClientRect()
+        if (ref.current && dialogDimentions && (
+            e.clientX < dialogDimentions.left ||
+            e.clientX > dialogDimentions.right ||
+            e.clientY < dialogDimentions.top ||
+            e.clientY > dialogDimentions.bottom 
+            )
+        ) {
+            ref.current.close()
+        }
+    }
+    return <dialog onClick={backdropCloseHandler} className={styles.Modal} ref={ref}>{children}</dialog>
+}
+
+export default Modal
\ No newline at end of file
--- a/src/components/UI/Modal2/Modal2.tsx
+++ b/src/components/UI/Modal2/Modal2.tsx
+const Modal2 = ({close, show, title, children}: any) => {
+    return (
+        <div style={{display: show ? 'block' : 'none'}}>
+            <h1>{title}</h1>
+            <button onClick={close}>X</button>
+            {children}
+        </div>
+    )
+}
\ No newline at end of file
--- a/src/enums/EIngredientPrices.ts
+++ b/src/enums/EIngredientPrices.ts
+export enum EIngredientPrices {
+   salad = 200,
+   cheese = 400,
+   bacon = 700,
+   meat = 900,
+   bread = 150
+}
\ No newline at end of file
--- a/src/main.tsx
+++ b/src/main.tsx
+// import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+// import App from './App.tsx'
+import { createBrowserRouter, RouterProvider } from 'react-router'
+import BurgerBuilder from './components/BurgerBuilder/BurgerBuilder.tsx'
+import { Checkout } from './components/Checkout/Checkout.tsx'
+import { ContactData } from './components/ContactData/ContactData.tsx'
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <BurgerBuilder />
+  },
+  {
+    path: '/checkout',
+    element: <Checkout />,
+    children: [
+      {
+        path: 'contact-data',
+        element: <ContactData />
+      }
+    ]
+  },
+  {
+    path: '*',
+    element: <h1>Not Found</h1>
+  }
+])
+
+createRoot(document.getElementById('root')!).render(
+  <RouterProvider router={router} />,
+)
+
+
+
+
+// createRoot(document.getElementById('root')!).render(
+//   <StrictMode>
+//     <App />
+//   </StrictMode>,
+// )
--- a/src/types/TIngredientNames.ts
+++ b/src/types/TIngredientNames.ts
+export type TIngredientNames = 
+    'salad' | 
+    'meat' | 
+    'bacon' | 
+    'cheese';
--- a/src/types/TIngredients.ts
+++ b/src/types/TIngredients.ts
+import { TIngredientNames } from "./TIngredientNames";
+
+export type TIngredients = {
+   [key in TIngredientNames]: number;
+}
--- a/src/vite-env.d.ts
+++ b/src/vite-env.d.ts
+/// <reference types="vite/client" />
--- a/tsconfig.app.json
+++ b/tsconfig.app.json
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": false,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}
--- a/tsconfig.json
+++ b/tsconfig.json
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}
--- a/tsconfig.node.json
+++ b/tsconfig.node.json
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}
--- a/vite.config.ts
+++ b/vite.config.ts
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    port: 3000
+  }
+})