feat(web): plugin playground presets header (#1319)

web/src/beta/features/PluginPlayground/Plugins/presets/index.ts

@@ -1,6 +1,7 @@
 import { PluginType } from "../constants";
 
 import { myPlugin } from "./custom/myPlugin";
+import { header } from "./ui/header";
 import { responsivePanel } from "./ui/responsivePanel";
 import { sidebar } from "./ui/sidebar";
 
@@ -21,6 +22,6 @@ export const presetPlugins: PresetPlugins = [
   {
     id: "ui",
     title: "UI",
-    plugins: [responsivePanel, sidebar]
+    plugins: [responsivePanel, sidebar, header]
   }
 ];

web/src/beta/features/PluginPlayground/Plugins/presets/ui/header.ts

@@ -0,0 +1,86 @@
+import { FileType, PluginType } from "../../constants";
+import { PRESET_PLUGIN_COMMON_STYLE } from "../common";
+
+const yamlFile: FileType = {
+  id: "ui-header-reearth-yml",
+  title: "reearth.yml",
+  sourceCode: `id: header-plugin
+name: Header
+version: 1.0.0
+extensions:
+  - id: header
+    type: widget
+    name: Header Widget
+    description: Header Widget
+    widgetLayout:
+      extended: true
+      defaultLocation:
+        zone: outer
+        section: center
+        area: top
+  `,
+  disableEdit: true,
+  disableDelete: true
+};
+
+const widgetFile: FileType = {
+  id: "ui-header-widget",
+  title: "header.js",
+  sourceCode: `reearth.ui.show(\`
+  ${PRESET_PLUGIN_COMMON_STYLE}
+    <style>
+      .header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 10px 16px;
+        position: sticky;
+        top: 0;
+      }
+
+      .header-logo img {
+        height: 40px;
+        cursor: pointer;
+      }
+
+      .header-menu {
+        list-style: none;
+        display: flex;
+        gap: 15px;
+        margin: 0;
+        padding: 0;
+      }
+
+      .header-menu li {
+        font-size: 14px;
+        color: #555;
+        cursor: pointer;
+        transition: color 0.3s ease;
+      }
+
+      .header-menu li:active {
+        color: #000;
+      }
+    </style>
+    <div id="wrapper">
+      <div class="header">
+        <div class="header-logo">
+        <p>Re:Earth</p>
+        </div>
+        <ul class="header-menu">
+          <li>Home</li>
+          <li>About</li>
+          <li>Services</li>
+          <li>Contact</li>
+          <li>FAQ</li>
+        </ul>
+      </div>
+    </div>
+  \`); `
+};
+
+export const header: PluginType = {
+  id: "header",
+  title: "Header",
+  files: [widgetFile, yamlFile]
+};