119 lines
3.3 KiB
TypeScript
119 lines
3.3 KiB
TypeScript
|
import { html, css, cssManager } from '@design.estate/dees-element';
|
||
|
|
import type { UpladminOptionCard } from './upladmin-option-card.js';
|
||
|
|
|
||
|
|
export const demoFunc = () => html`
|
||
|
|
<style>
|
||
|
|
.demo-container {
|
||
|
|
padding: 24px;
|
||
|
|
background: ${cssManager.bdTheme('#fafafa', '#0a0a0a')};
|
||
|
|
min-height: 100vh;
|
||
|
|
}
|
||
|
|
.demo-section {
|
||
|
|
margin-bottom: 32px;
|
||
|
|
}
|
||
|
|
.demo-title {
|
||
|
|
font-size: 14px;
|
||
|
|
font-weight: 600;
|
||
|
|
color: ${cssManager.bdTheme('#09090b', '#fafafa')};
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
.demo-grid {
|
||
|
|
display: grid;
|
||
|
|
grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
|
||
|
|
gap: 12px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div class="demo-container">
|
||
|
|
<div class="demo-section">
|
||
|
|
<div class="demo-title">Severity Variants</div>
|
||
|
|
<div class="demo-grid">
|
||
|
|
<upladmin-option-card
|
||
|
|
variant="critical"
|
||
|
|
icon="lucide:AlertCircle"
|
||
|
|
label="Critical"
|
||
|
|
description="Severe impact"
|
||
|
|
></upladmin-option-card>
|
||
|
|
<upladmin-option-card
|
||
|
|
variant="major"
|
||
|
|
icon="lucide:AlertTriangle"
|
||
|
|
label="Major"
|
||
|
|
description="Significant impact"
|
||
|
|
></upladmin-option-card>
|
||
|
|
<upladmin-option-card
|
||
|
|
variant="minor"
|
||
|
|
icon="lucide:Info"
|
||
|
|
label="Minor"
|
||
|
|
description="Limited impact"
|
||
|
|
></upladmin-option-card>
|
||
|
|
<upladmin-option-card
|
||
|
|
variant="maintenance"
|
||
|
|
icon="lucide:Wrench"
|
||
|
|
label="Maintenance"
|
||
|
|
description="Scheduled work"
|
||
|
|
selected
|
||
|
|
></upladmin-option-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<div class="demo-title">Status Variants</div>
|
||
|
|
<div class="demo-grid">
|
||
|
|
<upladmin-option-card
|
||
|
|
variant="investigating"
|
||
|
|
icon="lucide:Search"
|
||
|
|
label="Investigating"
|
||
|
|
description="Looking into it"
|
||
|
|
></upladmin-option-card>
|
||
|
|
<upladmin-option-card
|
||
|
|
variant="identified"
|
||
|
|
icon="lucide:Target"
|
||
|
|
label="Identified"
|
||
|
|
description="Root cause found"
|
||
|
|
></upladmin-option-card>
|
||
|
|
<upladmin-option-card
|
||
|
|
variant="monitoring"
|
||
|
|
icon="lucide:Eye"
|
||
|
|
label="Monitoring"
|
||
|
|
description="Fix applied"
|
||
|
|
selected
|
||
|
|
></upladmin-option-card>
|
||
|
|
<upladmin-option-card
|
||
|
|
variant="resolved"
|
||
|
|
icon="lucide:CheckCircle"
|
||
|
|
label="Resolved"
|
||
|
|
description="Issue fixed"
|
||
|
|
></upladmin-option-card>
|
||
|
|
<upladmin-option-card
|
||
|
|
variant="postmortem"
|
||
|
|
icon="lucide:FileText"
|
||
|
|
label="Postmortem"
|
||
|
|
description="Analysis complete"
|
||
|
|
></upladmin-option-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<div class="demo-title">States</div>
|
||
|
|
<div class="demo-grid">
|
||
|
|
<upladmin-option-card
|
||
|
|
variant="primary"
|
||
|
|
icon="lucide:Star"
|
||
|
|
label="Normal"
|
||
|
|
></upladmin-option-card>
|
||
|
|
<upladmin-option-card
|
||
|
|
variant="primary"
|
||
|
|
icon="lucide:Star"
|
||
|
|
label="Selected"
|
||
|
|
selected
|
||
|
|
></upladmin-option-card>
|
||
|
|
<upladmin-option-card
|
||
|
|
variant="primary"
|
||
|
|
icon="lucide:Star"
|
||
|
|
label="Disabled"
|
||
|
|
disabled
|
||
|
|
></upladmin-option-card>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|