updts

src/components/Order/CheckoutSummary/CheckoutSummary.css

+.CheckoutSummary {
+    text-align: center;
+    width: 80%;
+    margin: auto;
+}
+
+@media (min-width: 600px) {
+    .CheckoutSummary {
+        width: 500px;
+    }
+}
\ No newline at end of file

src/components/Order/CheckoutSummary/CheckoutSummary.tsx

+import Burger from "@/components/Burger/Burger";
+import Button from "@/components/UI/Button/Button";
+import type { Ingredients } from "@/interfaces/Ingredients";
+import { MouseEventHandler } from "react";
+import "./CheckoutSummary.css";
+
+interface Props {
+  ingredients: Ingredients;
+  checkoutContinued: MouseEventHandler<HTMLButtonElement>;
+  checkoutCancelled: MouseEventHandler<HTMLButtonElement>;
+}
+
+const CheckoutSummary = (props: Props) => {
+    return (
+        <div className="CheckoutSummary">
+            <h1>We hope it tastes well!</h1>
+
+            <div style={{ width: "100%", margin: "auto" }}>
+                <Burger ingredients={props.ingredients} />
+            </div>
+
+            <Button
+                btnType="Danger"
+                click={props.checkoutCancelled}
+            >
+                CANCEL
+            </Button>
+
+            <Button
+                btnType="Success"
+                click={props.checkoutContinued}
+            >
+                CONTINUE
+            </Button>
+        </div>
+    );
+};
+
+export default CheckoutSummary;

src/components/UI/Button/Button.css

+
+.Button {
+    background-color: transparent;
+    border: none;
+    color: white;
+    outline: none;
+    cursor: pointer;
+    font: inherit;
+    padding: 10px;
+    margin: 10px;
+    font-weight: bold;
+}
+
+.Button:first-of-type {
+    margin-left: 0;
+    padding-left: 0;
+}
+
+.Success {
+    color: #5C9210;
+}
+
+.Danger {
+    color: #944317;
+}
\ No newline at end of file

src/components/UI/Button/Button.tsx

+import type { MouseEventHandler, ReactNode } from "react";
+import "./Button.css";
+
+interface Props {
+  click: MouseEventHandler<HTMLButtonElement>;
+  btnType: "Success" | "Danger";
+  children: ReactNode;
+}
+
+const Button = (props: Props) => (
+  <button onClick={props.click} className={["Button", props.btnType].join(" ")}>
+    {props.children}
+  </button>
+);
+
+export default Button;

src/containers/BurgerBuilder/BurgerBuilder.tsx

@@ -4,12 +4,11 @@ import OrderSummary from '@/components/Burger/OrderSummary/OrderSummary';
 import Modal from '@/components/UI/Modal/Modal';
 import { IngredientNames, IngredientPrices, Ingredients } from '@/interfaces/Ingredients';
 import { useState } from 'react';
-import { createSearchParams, URLSearchParamsInit, useNavigate, useSearchParams } from 'react-router-dom'
+import { createSearchParams, URLSearchParamsInit, useNavigate } from 'react-router-dom'
 
 const BurgerBuilder = () => {
     const navigate = useNavigate()
 
-    const [searchParams, setSearchParams] = useSearchParams();
     const [totalPrice, setTotalPrice] = useState<number>(IngredientPrices.bread);
     const [purchasable, setPurchasable] = useState<boolean>(false);
     const [open, setOpen] = useState<boolean>(false);
@@ -61,10 +60,12 @@ const BurgerBuilder = () => {
     }
 
     const onContinueHandler = () => {
-        const params = createSearchParams(ingredients as unknown as URLSearchParamsInit)
+        const params = createSearchParams(ingredients as unknown as URLSearchParamsInit);
 
-        setSearchParams(params)
-        navigate('/checkout')
+        navigate({
+          pathname: '/checkout',
+          search: `?${params.toString()}`
+        })
     }
 
     return (

src/containers/Checkout/Checkout.tsx

+import {useRef} from 'react';
+import type {Ingredients} from '@/interfaces/Ingredients';
+import CheckoutSummary from '@/components/Order/CheckoutSummary/CheckoutSummary';
+import { useNavigate, useSearchParams, Outlet } from 'react-router-dom';
+
+const parseSearch = <T extends Object,>(searchParams: URLSearchParams): T => {
+    return Object.fromEntries(searchParams) as unknown as T;  
+}
+
+const Checkout = () => {
+    const navigate = useNavigate();
+    const [searchParams] = useSearchParams();
+    const ingredients = useRef(parseSearch<Ingredients>(searchParams));
+
+    const checkoutCancelledHandler = () => {
+        navigate(-1);
+    };
+    
+    const checkoutContinuedHandler = () => {
+        navigate('contact-data', {state: {ingredients: ingredients.current}});
+    };
+
+    return (
+        <>
+            <CheckoutSummary
+                ingredients={ingredients.current}
+                checkoutCancelled={checkoutCancelledHandler}
+                checkoutContinued={checkoutContinuedHandler}
+            />
+            <Outlet/>
+        </>
+    )
+};
+
+export default Checkout;
\ No newline at end of file

src/containers/Checkout/ContactData/ContactData.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;
+}
+
+.Input {
+    display: block;
+}
+
+@media (min-width: 600px) {
+    .ContactData {
+        width: 500px;
+    }
+}
\ No newline at end of file

src/containers/Checkout/ContactData/ContactData.tsx

+import Button from "@/components/UI/Button/Button";
+import "./ContactData.css";
+
+const ContactData = () => {
+  return (
+    <div className="ContactData">
+      <h4>Enter your Contact Data</h4>
+
+      <form>
+        <input
+            className="Input"
+            type="text"
+            name="name"
+            placeholder="Your Name"
+        />
+
+        <input
+            className="Input"
+            type="email"
+            name="email"
+            placeholder="Your Mail"
+        />
+
+        <input
+            className="Input"
+            type="text"
+            name="street"
+            placeholder="Street"
+        />
+
+        <input
+            className="Input"
+            type="text"
+            name="postal"
+            placeholder="Postal Code"
+        />
+
+        <Button click={() => {}} btnType="Success">
+          ORDER
+        </Button>
+      </form>
+    </div>
+  );
+};
+
+export default ContactData;

src/containers/CheckoutSummary/CheckoutSummary.tsx

-import { useNavigate, Outlet, NavLink } from "react-router-dom"
-
-const CheckoutSummary = () => {
-  const navigate = useNavigate()
-
-  return (
-    <div>
-      <h1>CheckoutSummary</h1>
-      <NavLink to={'/'} end>
-        contact
-      </NavLink>
-
-      <Outlet/>
-    </div>
-  )
-}
-
-export default CheckoutSummary
\ No newline at end of file

src/main.tsx

 import ReactDOM from 'react-dom/client'
 import { BrowserRouter, Route, Routes } from 'react-router-dom'
 import BurgerBuilder from './containers/BurgerBuilder/BurgerBuilder'
-import CheckoutSummary from './containers/CheckoutSummary/CheckoutSummary'
+import Checkout from './containers/Checkout/Checkout'
+import ContactData from './containers/Checkout/ContactData/ContactData'
 import './index.css'
 
 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
   <BrowserRouter>
     <Routes>
       <Route path='/' element={<BurgerBuilder />}/>
-      <Route path='/checkout' element={<CheckoutSummary />}>
-        <Route index element={<h1>I am product</h1>}/>
-        <Route element={<h1>I am contact</h1>}/>
+      <Route path="/checkout" element={<Checkout/>}>
+        <Route path="contact-data" element={<ContactData/>}/>
       </Route>
     </Routes>
   </BrowserRouter>