1  import { useNavigate } from "@tanstack/react-router";
 2  import Cart from "./Cart.tsx";
 3  
 4  export default function Checkout() {
 5    const navigate = useNavigate();
 6    function onCheckout() {
 7      navigate({
 8        to: "/shipping",
 9        search: (prev: Record<string, string>) => ({
10          shopId: prev.shopId,
11        }),
12      });
13    }
14    return (
15      <main data-testid="checkout-screen" className="flex justify-center px-4">
16        <section className="w-full md:w-[800px]">
17          <h1 className="my-5">Cart</h1>
18          <Cart onCheckout={onCheckout} />
19        </section>
20      </main>
21    );
22  }