68 lines
2.4 KiB
TypeScript
68 lines
2.4 KiB
TypeScript
|
import { html, css, cssManager } from '@design.estate/dees-element';
|
||
|
|
import './dees-tile.js';
|
||
|
|
|
||
|
|
export const demoFunc = () => {
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
.tile-demo-content {
|
||
|
|
position: absolute;
|
||
|
|
inset: 0;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
color: ${cssManager.bdTheme('hsl(0 0% 45%)', 'hsl(0 0% 55%)')};
|
||
|
|
font-size: 13px;
|
||
|
|
}
|
||
|
|
.footer-stats {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 24px;
|
||
|
|
font-size: 11px;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
.footer-stats .stat {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
gap: 6px;
|
||
|
|
}
|
||
|
|
.footer-stats .stat strong {
|
||
|
|
color: ${cssManager.bdTheme('hsl(0 0% 15%)', 'hsl(0 0% 90%)')};
|
||
|
|
}
|
||
|
|
`}
|
||
|
|
</style>
|
||
|
|
<div class="demoBox">
|
||
|
|
<dees-tile heading="Simple Tile" style="height: 200px;">
|
||
|
|
<div class="tile-demo-content">Content area with rounded corners</div>
|
||
|
|
</dees-tile>
|
||
|
|
|
||
|
|
<dees-tile heading="Tile with Footer" style="height: 200px;">
|
||
|
|
<div class="tile-demo-content">Content goes here</div>
|
||
|
|
<div slot="footer" class="footer-stats">
|
||
|
|
<span class="stat">latest <strong>42</strong></span>
|
||
|
|
<span class="stat">min <strong>12</strong></span>
|
||
|
|
<span class="stat">max <strong>87</strong></span>
|
||
|
|
<span class="stat">avg <strong>45.3</strong></span>
|
||
|
|
</div>
|
||
|
|
</dees-tile>
|
||
|
|
|
||
|
|
<dees-tile style="height: 200px;">
|
||
|
|
<div slot="header" style="display:flex;align-items:center;gap:12px;width:100%;">
|
||
|
|
<span style="font-weight:500;">Custom Header</span>
|
||
|
|
<input type="text" placeholder="Search..." style="flex:1;max-width:200px;padding:2px 8px;border:1px solid;border-radius:4px;font-size:12px;background:transparent;color:inherit;border-color:inherit;">
|
||
|
|
</div>
|
||
|
|
<div class="tile-demo-content">Custom header slot with search input</div>
|
||
|
|
</dees-tile>
|
||
|
|
</div>
|
||
|
|
</dees-demowrapper>
|
||
|
|
`;
|
||
|
|
};
|