From 520dd6de9c4e378c1f0b88418b4bc8093d9c9ba0 Mon Sep 17 00:00:00 2001
From: efim <efim.nefedov@nordigy.ru>
Date: Wed, 28 Jun 2023 12:16:52 +0000
Subject: [PATCH] feat(12): moving order summary into template file

---
 .../src/main/resources/templates/index.html   | 38 +------------------
 .../resources/templates/order-summary.html    | 37 ++++++++++++++++++
 2 files changed, 38 insertions(+), 37 deletions(-)
 create mode 100644 12-order-summary-component-thymeleaf/src/main/resources/templates/order-summary.html

diff --git a/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html b/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
index da3429e..5128788 100644
--- a/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
+++ b/12-order-summary-component-thymeleaf/src/main/resources/templates/index.html
@@ -37,44 +37,8 @@
     ></div>
     <!-- main container -->
     <div class="bg-pale-blue w-screen h-screen grid place-content-center">
-      <div
-        class="bg-white rounded-xl drop-shadow-2xl flex flex-col items-center w-[320px] h-[565px] md:w-[450px] md:h-[700px]"
-      >
-        <img
-          src="public/images/illustration-hero.svg"
-          class="rounded-t-xl w-full"
-        />
-        <h1 class="text-xl font-extrabold my-7 md:text-3xl md:mt-10">Order Summary</h1>
-
-        <p class="text-center text-desaturated-blue px-8 mb-5 md:px-12">
-          You can now listen to millions of songs, audiobooks, and podcasts on
-          any device anywhere you like!
-        </p>
-
-        <div
-          class="bg-very-pale-blue rounded-xl p-4 w-[calc(100%-3rem)] flex flex-row md:w-[calc(100%-6rem)] md:h-24 md:items-center md:p-6"
-        >
-          <img src="public/images/icon-music.svg"
-               class="md:w-12 md:h-12"
-          />
-          <div class="flex flex-col grow pl-3 md:pl-6 justify-center">
-            <p class="font-bold text-sm text-dark-blue md:text-base">Annual Plan</p>
-            <p class="text-desaturated-blue text-sm md:text-base">$59.99/year</p>
-          </div>
-          <button class="underline text-xs text-bright-blue font-bold hover:no-underline hover:text-warm-blue">
-            Change
-          </button>
-        </div>
-
-        <button
-          class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)] md:w-[calc(100%-6rem)] md:my-8 hover:bg-warm-blue"
-        >
-          Proceed to Payment
-        </button>
-        <button class="text-desaturated-blue font-bold hover:text-dark-blue">Cancel Order</button>
-      </div>
+      <div th:replace="order-summary" />
     </div>
-
     <div class="attribution fixed bottom-0 inset-x-0">
       Challenge by
       <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
diff --git a/12-order-summary-component-thymeleaf/src/main/resources/templates/order-summary.html b/12-order-summary-component-thymeleaf/src/main/resources/templates/order-summary.html
new file mode 100644
index 0000000..820641c
--- /dev/null
+++ b/12-order-summary-component-thymeleaf/src/main/resources/templates/order-summary.html
@@ -0,0 +1,37 @@
+<div
+  class="bg-white rounded-xl drop-shadow-2xl flex flex-col items-center w-[320px] h-[565px] md:w-[450px] md:h-[700px]"
+>
+  <img src="public/images/illustration-hero.svg" class="rounded-t-xl w-full" />
+  <h1 class="text-xl font-extrabold my-7 md:text-3xl md:mt-10">
+    Order Summary
+  </h1>
+
+  <p class="text-center text-desaturated-blue px-8 mb-5 md:px-12">
+    You can now listen to millions of songs, audiobooks, and podcasts on any
+    device anywhere you like!
+  </p>
+
+  <div
+    class="bg-very-pale-blue rounded-xl p-4 w-[calc(100%-3rem)] flex flex-row md:w-[calc(100%-6rem)] md:h-24 md:items-center md:p-6"
+  >
+    <img src="public/images/icon-music.svg" class="md:w-12 md:h-12" />
+    <div class="flex flex-col grow pl-3 md:pl-6 justify-center">
+      <p class="font-bold text-sm text-dark-blue md:text-base">Annual Plan</p>
+      <p class="text-desaturated-blue text-sm md:text-base">$59.99/year</p>
+    </div>
+    <button
+      class="underline text-xs text-bright-blue font-bold hover:no-underline hover:text-warm-blue"
+    >
+      Change
+    </button>
+  </div>
+
+  <button
+    class="bg-bright-blue rounded-xl drop-shadow-2xl text-white font-bold py-3 my-6 w-[calc(100%-3rem)] md:w-[calc(100%-6rem)] md:my-8 hover:bg-warm-blue"
+  >
+    Proceed to Payment
+  </button>
+  <button class="text-desaturated-blue font-bold hover:text-dark-blue">
+    Cancel Order
+  </button>
+</div>