make modal confirm to standalone

client/src/app/shared/modal/recipe-details/recipe-modal.component.html

@@ -0,0 +1,119 @@
+<button class="btn btn-sm btn-circle btn-ghost" (click)="openModal()">
+  <svg
+    class="w-6 h-6 text-gray-800 dark:text-white"
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 20 20"
+  >
+    <path
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="1"
+      d="M7.75 4H19M7.75 4a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 4h2.25m13.5 6H19m-2.25 0a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 10h11.25m-4.5 6H19M7.75 16a2.25 2.25 0 0 1-4.5 0m4.5 0a2.25 2.25 0 0 0-4.5 0M1 16h2.25"
+    />
+  </svg>
+</button>
+
+<dialog class="modal" #detailModal>
+  <div class="modal-box max-w-[1200px]">
+    <div>
+      <h3 class="font-bold text-lg mb-3">{{ title }}</h3>
+    </div>
+    <div class="modal-scroll">
+      <form class="flex flex-col gap-2" [formGroup]="recipeDetail">
+        <div class="flex gap-5">
+          <div class="bg-gray-500 w-[300px] h-[300px]">Picture</div>
+          <div class="grid grid-cols-2 gap-4 w-full">
+            <div class="flex items-center">
+              <label class="label"
+                ><span class="label-text text-base mr-3 w-max"
+                  >Name:</span
+                ></label
+              >
+              <input
+                type="text"
+                class="input input-sm input-bordered input-ghost w-full"
+                formControlName="name"
+              />
+            </div>
+            <div class="flex items-center">
+              <label class="text-base mr-3 w-max">Other Name:</label>
+              <input
+                type="text"
+                class="input input-sm input-bordered input-ghost w-full"
+                formControlName="otherName"
+              />
+            </div>
+            <div class="flex items-center">
+              <label class="text-base mr-3 w-max">Description:</label>
+              <input
+                type="text"
+                class="input input-sm input-bordered input-ghost w-full"
+                formControlName="description"
+              />
+            </div>
+            <div class="flex items-center">
+              <label class="text-base mr-3 w-max">Other Description:</label>
+              <input
+                type="text"
+                class="input input-sm input-bordered input-ghost w-full"
+                formControlName="otherDescription"
+              />
+            </div>
+            <div class="flex flex-row col-span-2 gap-5">
+              <div class="form-control">
+                <label class="cursor-pointer label">
+                  <span class="label-text">Is Use?</span>
+                  <input
+                    type="checkbox"
+                    class="toggle"
+                    formControlName="isUse"
+                  />
+                </label>
+              </div>
+              <div class="form-control">
+                <label class="cursor-pointer label">
+                  <span class="label-text">Is Show?</span>
+                  <input
+                    type="checkbox"
+                    class="toggle"
+                    formControlName="isShow"
+                  />
+                </label>
+              </div>
+              <div class="form-control">
+                <label class="cursor-pointer label">
+                  <span class="label-text">Is Disable?</span>
+                  <input
+                    type="checkbox"
+                    class="toggle"
+                    formControlName="disable"
+                  />
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="modal-action">
+          <a class="btn px-10" (click)="onConfirmSave()">Save</a>
+          <a class="btn" (click)="onConfirmClose()">Close</a>
+        </div>
+        <confirm-modal
+          [title]="confirmSave.title"
+          [message]="confirmSave.message"
+          [confirmCallBack]="confirmSave.confirmCallBack"
+          [show]="showConfirmSaveModal"
+        ></confirm-modal>
+
+        <confirm-modal
+          [title]="confirmClose.title"
+          [message]="confirmClose.message"
+          [confirmCallBack]="confirmClose.confirmCallBack"
+          [show]="showConfirmCloseModal"
+        ></confirm-modal>
+      </form>
+    </div>
+  </div>
+</dialog>