refactor(class style): empty-placeholder

Author: duynndu

projects/shared/constants/template-categories.ts

@@ -26,21 +26,33 @@ export const templateCategories: TemplateCategory[] = [
         label: '2 Columns Grid',
         icon: 'fa-solid fa-grip',
         template: `
-        <div class="grid grid-cols-2 gap-1"></div>
+        <div class="grid grid-cols-2 gap-1">
+          <div></div>
+          <div></div>
+        </div>
       `,
       },
       {
         label: '3 Columns Grid',
         icon: 'fa-solid fa-grip',
         template: `
-        <div class="grid grid-cols-3 gap-1"></div>
+        <div class="grid grid-cols-3 gap-1">
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
       `,
       },
       {
         label: '4 Columns Grid',
         icon: 'fa-solid fa-grip',
         template: `
-        <div class="grid grid-cols-4 gap-1"></div>
+        <div class="grid grid-cols-4 gap-1">
+          <div></div>
+          <div></div>
+          <div></div>
+          <div></div>
+        </div>
       `,
       },
     ],

projects/template-editor/src/assets/main.css

@@ -17,7 +17,20 @@
 
 .empty-placeholder {
   border: 1px dashed #ccc;
-  padding: 10px;
+  padding: 5px;
+  text-align: center;
+  position: relative;
+  height: 15px;
+}
+
+.empty-placeholder::after {
+  content: "Empty";
+  color: #999;
+  font-style: italic;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 /* Element highlight */