Created Checkout page

src/components/Checkout/Checkout.tsx

@@ -0,0 +1,294 @@
+function Checkout() {
+  return (
+    <div className="flex justify-between px-20 py-10 gap-16 items-end">
+      <div className="w-7/12 pr-4">
+        <h2 className="text-2xl font-bold py-4">Payment Methods</h2>
+
+        <div className="mb-6">
+          <button className="w-full py-6 text-xl text-gray-500 px-4 border rounded-md text-left">
+            Momo Payment
+          </button>
+        </div>
+
+        <div className="mb-6">
+          <button className="w-full py-6 text-xl text-gray-500 px-4 border border-gray-300 rounded-md text-left">
+            Debit Card Payment
+          </button>
+        </div>
+
+        <div className="py-6 px-4 border border-gray-300 rounded-md">
+          <div className="mb-6">
+            <h3 className="w-full text-xl text-gray-500 ounded-md text-left">
+              My Cards
+            </h3>
+            <div className="rounded-md py-4 flex flex-col gap-6">
+              <div className="rounded-md p-4 border border-gray-300">
+                <label className="flex items-center justify-between w-full">
+                  <div className="flex items-center">
+                    <img
+                      src="mastercard.svg"
+                      alt="Mastercard"
+                      className="w-12 mr-4"
+                    />
+                    <span className="text-gray-500">
+                      BK Bank **** **** **** 1234
+                    </span>
+                  </div>
+                  <input
+                    type="radio"
+                    name="card"
+                    className="h-6 w-6 radio-blue-600 hidden"
+                  />
+                  <span className="h-6 w-6 rounded-full border-2 border-primary"></span>
+                </label>
+              </div>
+              <div className="rounded-md p-4 border border-gray-300">
+                <label className="flex items-center justify-between w-full">
+                  <div className="flex items-center">
+                    <img
+                      src="visa.svg"
+                      alt="Mastercard"
+                      className="w-12 mr-4"
+                    />
+                    <span className="text-gray-500">
+                      Equity Bank**** **** **** 9644
+                    </span>
+                  </div>
+                  <input
+                    type="radio"
+                    name="card"
+                    className="h-6 w-6 radio-blue-600 hidden"
+                  />
+                  <span className="h-6 w-6 rounded-full border-2 border-blue-800 bg-primary"></span>
+                </label>
+              </div>
+
+              <div className="flex gap-6 items-center">
+                <button
+                  type="button"
+                  className="flex items-center text-blue-500"
+                >
+                  {' '}
+                  <svg
+                    width="39"
+                    height="39"
+                    viewBox="0 0 39 39"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <circle
+                      cx="19.2562"
+                      cy="19.3724"
+                      r="19.1493"
+                      fill="#6D31ED"
+                    />
+                    <g clipPath="url(#clip0_492_2098)">
+                      <path
+                        d="M19.7352 28.6481C24.5935 28.6481 28.5319 24.7097 28.5319 19.8514C28.5319 14.9931 24.5935 11.0547 19.7352 11.0547C14.8769 11.0547 10.9385 14.9931 10.9385 19.8514C10.9385 24.7097 14.8769 28.6481 19.7352 28.6481Z"
+                        stroke="white"
+                        strokeWidth="1.25667"
+                        strokeLinecap="round"
+                        strokeLinejoin="round"
+                      />
+                      <path
+                        d="M15.9653 19.8516H23.5054"
+                        stroke="white"
+                        stroke-width="1.25667"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                      <path
+                        d="M19.7354 16.0815V23.6216"
+                        stroke="white"
+                        stroke-width="1.25667"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                      />
+                    </g>
+                    <defs>
+                      <clipPath id="clip0_492_2098">
+                        <rect
+                          width="20.1067"
+                          height="20.1067"
+                          fill="white"
+                          transform="translate(9.68164 9.79785)"
+                        />
+                      </clipPath>
+                    </defs>
+                  </svg>
+                </button>
+                <span className="text-xl text-gray-500 font-medium">
+                  Add New Card
+                </span>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="flex gap-6 justify-center mt-12 rounded-md border-gray-300  border mx-16 md:mx-32 xl:mx-48 py-2 items-center">
+          <button className="flex items-center text-blue-500">
+            <svg
+              width="39"
+              height="39"
+              viewBox="0 0 39 39"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <circle cx="19.2562" cy="19.3724" r="19.1493" fill="#6D31ED" />
+              <g clip-path="url(#clip0_492_2098)">
+                <path
+                  d="M19.7352 28.6481C24.5935 28.6481 28.5319 24.7097 28.5319 19.8514C28.5319 14.9931 24.5935 11.0547 19.7352 11.0547C14.8769 11.0547 10.9385 14.9931 10.9385 19.8514C10.9385 24.7097 14.8769 28.6481 19.7352 28.6481Z"
+                  stroke="white"
+                  stroke-width="1.25667"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M15.9653 19.8516H23.5054"
+                  stroke="white"
+                  stroke-width="1.25667"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+                <path
+                  d="M19.7354 16.0815V23.6216"
+                  stroke="white"
+                  stroke-width="1.25667"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                />
+              </g>
+              <defs>
+                <clipPath id="clip0_492_2098">
+                  <rect
+                    width="20.1067"
+                    height="20.1067"
+                    fill="white"
+                    transform="translate(9.68164 9.79785)"
+                  />
+                </clipPath>
+              </defs>
+            </svg>
+          </button>
+          <span className="text-2xl text-gray-500 font-medium">
+            Add New payment
+          </span>
+        </div>
+      </div>
+
+      <div className="w-5/12 flex flex-col gap-10">
+        <div className="border-gray-300 border flex justify-between p-4 rounded-md mb-4">
+          <div className="grid grid-cols-2">
+            <img
+              src="iphone.svg"
+              alt="Cart item 1"
+              className="w-32 h-16 rounded object-cover"
+            />
+            <img
+              src="iphone.svg"
+              alt="Cart item 1"
+              className="w-32 h-16 rounded object-cover"
+            />
+            <img
+              src="iphone.svg"
+              alt="Cart item 1"
+              className="w-32 h-16 rounded object-cover"
+            />
+            <img
+              src="iphone.svg"
+              alt="Cart item 1"
+              className="w-32 h-16 rounded object-cover"
+            />
+          </div>
+          <div className="flex flex-col h-full py-6 pr-6">
+            <h1 className="text-2xl font-semibold">Cart Collection</h1>
+            <h2 className="text-lg text-gray-600">My saved collection</h2>
+            <h2 className="text-lg text-gray-600">For summer sales</h2>
+          </div>
+        </div>
+
+        <div className="border px-4 py-6 flex flex-col rounded-md mb-4 border-gray-300">
+          <h2 className="text-xl text-gray-600 pb-4">Promo Code</h2>
+          <div className="flex mb-4 h-16">
+            <input
+              type="text"
+              className="border border-gray-300 p-2 rounded-lg flex-grow mr-2"
+            />
+            <button className="bg-primary flex gap-2 text-white px-4 rounded-lg items-center">
+              <svg
+                width="39"
+                height="39"
+                viewBox="0 0 39 39"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle cx="19.2562" cy="19.3724" r="19.1493" fill="#6D31ED" />
+                <g clip-path="url(#clip0_492_2098)">
+                  <path
+                    d="M19.7352 28.6481C24.5935 28.6481 28.5319 24.7097 28.5319 19.8514C28.5319 14.9931 24.5935 11.0547 19.7352 11.0547C14.8769 11.0547 10.9385 14.9931 10.9385 19.8514C10.9385 24.7097 14.8769 28.6481 19.7352 28.6481Z"
+                    stroke="white"
+                    stroke-width="1.25667"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M15.9653 19.8516H23.5054"
+                    stroke="white"
+                    stroke-width="1.25667"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                  <path
+                    d="M19.7354 16.0815V23.6216"
+                    stroke="white"
+                    stroke-width="1.25667"
+                    stroke-linecap="round"
+                    stroke-linejoin="round"
+                  />
+                </g>
+                <defs>
+                  <clipPath id="clip0_492_2098">
+                    <rect
+                      width="20.1067"
+                      height="20.1067"
+                      fill="white"
+                      transform="translate(9.68164 9.79785)"
+                    />
+                  </clipPath>
+                </defs>
+              </svg>
+              <span className="text-xl">Apply</span>
+            </button>
+          </div>
+
+          <div className="mb-2">
+            <div className="flex justify-between py-2 text-xl">
+              <span className="text-gray-600">Total</span>
+              <span>$59.99</span>
+            </div>
+          </div>
+
+          <div className="mb-2">
+            <div className="flex justify-between text-xl border-b-2 border-gray-700 pb-4">
+              <span className="text-gray-600">Shipping</span>
+              <span>$25.99</span>
+            </div>
+          </div>
+
+          <div className="font-bold">
+            <div className="flex justify-between py-2 text-xl">
+              <span className="text-gray-600">Total Cost</span>
+              <span>$83.99</span>
+            </div>
+          </div>
+        </div>
+
+        <button className="w-full bg-primary text-white py-4 text-2xl font-medium rounded-md">
+          Pay Here
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default Checkout;

src/components/Checkout/header.tsx

@@ -0,0 +1,60 @@
+import Item from '../home/headerItem';
+
+interface HeaderItem {
+  image: string;
+  title: string;
+  description: string;
+  key: number;
+}
+
+const headerItems: HeaderItem[] = [
+  {
+    image: '/icons/icon1.svg',
+    title: 'Free Shipping',
+    description: 'Free shipping on all orders',
+    key: 1,
+  },
+  {
+    image: '/icons/icon4.svg',
+    title: 'Online Support 24/7',
+    description: 'Support online 24 hours a day',
+    key: 2,
+  },
+  {
+    image: '/icons/icon3.svg',
+    title: 'Money Return',
+    description: 'Back guarantee under 7 days',
+    key: 3,
+  },
+  {
+    image: '/icons/icon2.svg',
+    title: 'Member Discount',
+    description: 'On every order over $20.00',
+    key: 4,
+  },
+];
+
+export default function Header() {
+  return (
+    <header
+      className="mx-0 md:mx-16 flex justify-between items-center px-8"
+      style={{
+        fontFamily:
+          'Lexend, Manrope, Poppins, system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif',
+      }}
+    >
+      <div className="flex flex-col">
+        <h1 className="text-xl font-bold py-3">Complete Your Order</h1>
+        <span className="text-gray-600">
+          You are just a few steps away to finsih
+        </span>
+        <span className="text-gray-600">your order...</span>
+      </div>
+      <div className="grid grid-cols-2 justify-between gap-6 pt-3">
+        {headerItems.map((item) => (
+          <Item key={item.key} item={item} />
+        ))}
+      </div>
+    </header>
+  );
+}

src/pages/Checkout.tsx

@@ -0,0 +1,11 @@
+import Checkout from '@/components/Checkout/Checkout';
+import Header from '@/components/Checkout/header';
+
+export default function CheckoutPage() {
+  return (
+    <div>
+      <Header />
+      <Checkout />
+    </div>
+  );
+}

src/routes/AppRoutes.tsx

@@ -19,6 +19,7 @@ import AddProducts from '@/components/dashBoard/addProducts';
 import ProductDetails from '@/pages/ProductDetails';
 import ProtectedRoute from '@/components/ProtectedRoute';
 import Cart from '@/components/Cart/Cart';
+import CheckoutPage from '@/pages/Checkout';
 
 function AppRoutes() {
   return (
@@ -37,6 +38,7 @@ function AppRoutes() {
         <Route path="product-details/:id" element={<ProductDetails />} />
         <Route path="wishlist" element={<Wishlist />} />
         <Route path="/cart" element={<Cart />} />
+        <Route path="/checkout" element={<CheckoutPage />} />
       </Route>
       <Route path="/signup" element={<SignUp />} />
       <Route path="/signIn" element={<SignIn />} />

tsconfig.json

@@ -25,6 +25,6 @@
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true
   },
-  "include": [".eslintrc.cjs", "src", "dist/Cart", "dist/Checkout"],
+  "include": [".eslintrc.cjs", "src", "dist/Cart", "src/components/Checkout"],
   "references": [{ "path": "./tsconfig.node.json" }]
 }