6a Solution

Author: spencer-lochne

2-copy-of-code/lesson-06/ecommerce-project/src/pages/checkout-header.css 2-copy-of-code/lesson-06/ecommerce-project/src/pages/CheckoutHeader.css

@@ -0,0 +1,25 @@
+import './CheckoutHeader.css';
+
+export function CheckoutHeader() {
+  return (
+    <div className="checkout-header">
+      <div className="header-content">
+        <div className="checkout-header-left-section">
+          <a href="/">
+            <img className="logo" src="images/logo.png" />
+            <img className="mobile-logo" src="images/mobile-logo.png" />
+          </a>
+        </div>
+
+        <div className="checkout-header-middle-section">
+          Checkout (<a className="return-to-home-link"
+            href="/">3 items</a>)
+        </div>
+
+        <div className="checkout-header-right-section">
+          <img src="images/icons/checkout-lock-icon.png" />
+        </div>
+      </div>
+    </div>
+  );
+}

2-copy-of-code/lesson-06/ecommerce-project/src/pages/CheckoutHeader.jsx

@@ -1,30 +1,12 @@
-import './checkout-header.css';
+import { CheckoutHeader } from './CheckoutHeader';
 import './CheckoutPage.css';
 
 export function CheckoutPage() {
   return (
     <>
       <title>Checkout</title>
 
-      <div className="checkout-header">
-        <div className="header-content">
-          <div className="checkout-header-left-section">
-            <a href="/">
-              <img className="logo" src="images/logo.png" />
-              <img className="mobile-logo" src="images/mobile-logo.png" />
-            </a>
-          </div>
-
-          <div className="checkout-header-middle-section">
-            Checkout (<a className="return-to-home-link"
-              href="/">3 items</a>)
-          </div>
-
-          <div className="checkout-header-right-section">
-            <img src="images/icons/checkout-lock-icon.png" />
-          </div>
-        </div>
-      </div>
+      <CheckoutHeader />
 
       <div className="checkout-page">
         <div className="page-title">Review your order</div>