initial

ts_web/elements/upladmin-statuspage-config/upladmin-statuspage-config.demo.ts

@@ -0,0 +1,47 @@
+import { html, css, cssManager } from '@design.estate/dees-element';
+import type { IStatusPageConfig } from '../../interfaces/index.js';
+import './upladmin-statuspage-config.js';
+
+export const demoFunc = () => html`
+  <style>
+    ${css`
+      .demo-container {
+        padding: 24px;
+        background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
+        min-height: 100vh;
+      }
+
+      .demo-title {
+        margin: 0 0 24px 0;
+        font-size: 14px;
+        font-weight: 600;
+        color: ${cssManager.bdTheme('#71717a', '#a1a1aa')};
+        text-transform: uppercase;
+        letter-spacing: 0.05em;
+      }
+    `}
+  </style>
+
+  <div class="demo-container">
+    <h3 class="demo-title">Status Page Configuration</h3>
+    <upladmin-statuspage-config
+      .config=${{
+        companyName: 'Acme Corporation',
+        companyLogo: 'https://via.placeholder.com/200x60?text=ACME',
+        supportEmail: 'support@acme.example.com',
+        statusPageUrl: 'https://status.acme.example.com',
+        legalUrl: 'https://acme.example.com/terms',
+        apiEndpoint: 'https://api.acme.example.com/status',
+        theme: 'auto',
+        whitelabel: false,
+        refreshInterval: 60,
+        showHistoricalDays: 90,
+        enableWebSocket: true,
+        enableNotifications: false,
+        timeZone: 'America/New_York',
+        language: 'en',
+        dateFormat: 'relative',
+      } as IStatusPageConfig}
+    ></upladmin-statuspage-config>
+  </div>
+`;