80 lines
2.0 KiB
TypeScript
80 lines
2.0 KiB
TypeScript
|
import { html } from '@design.estate/dees-element';
|
||
|
|
|
||
|
|
export const demo = () => html`
|
||
|
|
<style>
|
||
|
|
.demo-container {
|
||
|
|
padding: 40px;
|
||
|
|
background: #f5f5f5;
|
||
|
|
}
|
||
|
|
.demo-section {
|
||
|
|
margin-bottom: 60px;
|
||
|
|
}
|
||
|
|
h3 {
|
||
|
|
margin-bottom: 20px;
|
||
|
|
font-size: 18px;
|
||
|
|
font-weight: 600;
|
||
|
|
}
|
||
|
|
.tile-row {
|
||
|
|
display: flex;
|
||
|
|
gap: 24px;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
align-items: flex-start;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|
||
|
|
<div class="demo-container">
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Video Tiles</h3>
|
||
|
|
<div class="tile-row">
|
||
|
|
<dees-tile-video
|
||
|
|
src="https://www.w3schools.com/html/mov_bbb.mp4"
|
||
|
|
label="bunny.mp4"
|
||
|
|
@tile-click=${(e: CustomEvent) => console.log('Video clicked:', e.detail)}
|
||
|
|
></dees-tile-video>
|
||
|
|
|
||
|
|
<dees-tile-video
|
||
|
|
src="https://www.w3schools.com/html/movie.mp4"
|
||
|
|
poster="https://picsum.photos/400/300"
|
||
|
|
label="movie.mp4"
|
||
|
|
></dees-tile-video>
|
||
|
|
|
||
|
|
<dees-tile-video
|
||
|
|
src="https://www.w3schools.com/html/mov_bbb.mp4"
|
||
|
|
label="another-video.mp4"
|
||
|
|
></dees-tile-video>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>Size Variants</h3>
|
||
|
|
<div class="tile-row">
|
||
|
|
<dees-tile-video
|
||
|
|
size="small"
|
||
|
|
src="https://www.w3schools.com/html/mov_bbb.mp4"
|
||
|
|
label="small.mp4"
|
||
|
|
></dees-tile-video>
|
||
|
|
|
||
|
|
<dees-tile-video
|
||
|
|
src="https://www.w3schools.com/html/mov_bbb.mp4"
|
||
|
|
label="default.mp4"
|
||
|
|
></dees-tile-video>
|
||
|
|
|
||
|
|
<dees-tile-video
|
||
|
|
size="large"
|
||
|
|
src="https://www.w3schools.com/html/mov_bbb.mp4"
|
||
|
|
label="large.mp4"
|
||
|
|
></dees-tile-video>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="demo-section">
|
||
|
|
<h3>With Poster Image</h3>
|
||
|
|
<dees-tile-video
|
||
|
|
src="https://www.w3schools.com/html/movie.mp4"
|
||
|
|
poster="https://picsum.photos/600/400"
|
||
|
|
label="poster-video.mp4"
|
||
|
|
></dees-tile-video>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
`;
|