46 lines
1.7 KiB
TypeScript
46 lines
1.7 KiB
TypeScript
import { html, cssManager } from '@design.estate/dees-element';
|
|
import '@design.estate/dees-wcctools/demotools';
|
|
import type { DeesAppuiActivitylog } from './dees-appui-activitylog.js';
|
|
|
|
export const demoFunc = () => {
|
|
// Create the activity log element
|
|
const activityLog = document.createElement('dees-appui-activitylog') as DeesAppuiActivitylog;
|
|
|
|
// Add demo entries after the element is connected
|
|
setTimeout(() => {
|
|
activityLog.addMany([
|
|
{ type: 'login', user: 'John Doe', message: 'logged in from Chrome on macOS' },
|
|
{ type: 'create', user: 'John Doe', message: 'created a new project "Frontend App"' },
|
|
{ type: 'update', user: 'Jane Smith', message: 'updated API documentation' },
|
|
{ type: 'view', user: 'John Doe', message: 'viewed dashboard analytics' },
|
|
{ type: 'delete', user: 'Admin', message: 'removed deprecated endpoint' },
|
|
{ type: 'custom', user: 'System', message: 'scheduled backup completed', iconName: 'lucide:database' },
|
|
{ type: 'logout', user: 'Alice Brown', message: 'logged out' },
|
|
{ type: 'create', user: 'Jane Smith', message: 'created invoice #1234' },
|
|
]);
|
|
|
|
// Subscribe to updates
|
|
activityLog.entries$.subscribe((entries) => {
|
|
console.log('Activity log updated:', entries.length, 'entries');
|
|
});
|
|
}, 100);
|
|
|
|
return html`
|
|
<dees-demowrapper>
|
|
<style>
|
|
.demo-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 600px;
|
|
background: ${cssManager.bdTheme('#f4f4f5', '#09090b')};
|
|
padding: 32px;
|
|
}
|
|
</style>
|
|
<div class="demo-container">
|
|
${activityLog}
|
|
</div>
|
|
</dees-demowrapper>
|
|
`;
|
|
};
|