66 lines
2.1 KiB
TypeScript
66 lines
2.1 KiB
TypeScript
import { html, css, cssManager } from '@design.estate/dees-element';
|
|
import './dees-settings.js';
|
|
import type { ISettingsField, ISettingsAction } from './dees-settings.js';
|
|
|
|
export const demoFunc = () => {
|
|
const acmeFields: ISettingsField[] = [
|
|
{ key: 'email', label: 'Account email', value: 'admin@example.com' },
|
|
{ key: 'status', label: 'Status', value: 'enabled' },
|
|
{ key: 'mode', label: 'Mode', value: 'production' },
|
|
{ key: 'autoRenew', label: 'Auto-renew', value: 'on' },
|
|
{ key: 'threshold', label: 'Renewal threshold', value: '30 days' },
|
|
];
|
|
|
|
const acmeActions: ISettingsAction[] = [
|
|
{ name: 'Edit', action: () => console.log('Edit clicked') },
|
|
];
|
|
|
|
const emptyActions: ISettingsAction[] = [
|
|
{ name: 'Configure', action: () => console.log('Configure clicked') },
|
|
];
|
|
|
|
const multiActions: ISettingsAction[] = [
|
|
{ name: 'Reset', action: () => console.log('Reset clicked') },
|
|
{ name: 'Edit', action: () => console.log('Edit clicked') },
|
|
];
|
|
|
|
return html`
|
|
<dees-demowrapper>
|
|
<style>
|
|
${css`
|
|
.demoBox {
|
|
background: ${cssManager.bdTheme('hsl(0 0% 95%)', 'hsl(0 0% 9%)')};
|
|
padding: 40px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 24px;
|
|
max-width: 600px;
|
|
}
|
|
`}
|
|
</style>
|
|
<div class="demoBox">
|
|
<dees-settings
|
|
.heading=${'ACME Settings'}
|
|
.settingsFields=${acmeFields}
|
|
.actions=${acmeActions}
|
|
></dees-settings>
|
|
|
|
<dees-settings
|
|
.heading=${'ACME Settings'}
|
|
.description=${'No ACME configuration yet. Click Configure to set up automated TLS certificate issuance.'}
|
|
.actions=${emptyActions}
|
|
></dees-settings>
|
|
|
|
<dees-settings
|
|
.heading=${'Server Config'}
|
|
.settingsFields=${[
|
|
{ key: 'host', label: 'Hostname', value: 'proxy.example.com' },
|
|
{ key: 'port', label: 'Port', value: '443' },
|
|
]}
|
|
.actions=${multiActions}
|
|
></dees-settings>
|
|
</div>
|
|
</dees-demowrapper>
|
|
`;
|
|
};
|