48 lines
1.4 KiB
TypeScript
48 lines
1.4 KiB
TypeScript
|
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>
|
||
|
|
`;
|