"description":"A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.",
A comprehensive web components library built with TypeScript and LitElement, providing **70+ production-ready UI components** for building modern web applications with consistent design and behavior. 🚀
A comprehensive web components library built with TypeScript and LitElement, providing **90+ production-ready UI components** for building modern web applications with consistent design and behavior. 🚀
@@ -1234,6 +1237,146 @@ Pagination component for navigating through large datasets.
---
### Media & Tile Components 🎬
A rich collection of tile-based preview components for displaying media files in grids. All tiles share a consistent base class (`DeesTileBase`) with lazy loading via `IntersectionObserver`, hover interactions, click events, context menus, and three size variants (`small`, `default`, `large`).
All tile badges use a unified styling system with label-awareness — when a `label` is set, bottom badges automatically shift up to avoid overlapping.
#### `DeesTilePdf`
PDF document tile with live page preview on hover.
```typescript
<dees-tile-pdf
pdfUrl="/documents/report.pdf"
label="Annual Report"
clickable
@tile-click=${handleClick}
></dees-tile-pdf>
```
**Key Features:**
- Renders first page as canvas preview
- Hover to scrub through pages (mouse X position maps to page number)
- Shows page count badge, hover page indicator
- Detects A4/Letter vs non-standard aspect ratios
#### `DeesTileImage`
Image tile with lazy loading and dimension display.
```typescript
<dees-tile-image
src="/photos/landscape.jpg"
alt="Mountain landscape"
label="landscape.jpg"
clickable
@tile-click=${handleClick}
></dees-tile-image>
```
**Key Features:**
- Lazy loads image on scroll into view
- Shows image dimensions on hover (e.g. "1920 × 1080")
- Checkerboard background for transparent images
#### `DeesTileAudio`
Audio file tile with waveform visualization.
```typescript
<dees-tile-audio
src="/music/track.mp3"
title="Summer Vibes"
artist="DJ Example"
clickable
@tile-click=${handleClick}
></dees-tile-audio>
```
**Key Features:**
- Generates waveform visualization from audio data
- Shows duration badge (e.g. "3:42")
- Displays title and artist metadata
- Play overlay on hover
#### `DeesTileVideo`
Video tile with thumbnail capture and hover preview.
```typescript
<dees-tile-video
src="/videos/intro.mp4"
poster="/thumbs/intro.jpg"
label="Introduction"
clickable
@tile-click=${handleClick}
></dees-tile-video>
```
**Key Features:**
- Auto-captures first frame as thumbnail (or uses provided `poster`)
- Plays video preview on hover
- Shows duration badge
- Play button overlay
#### `DeesTileNote`
Code/text snippet tile with syntax-aware display.
```typescript
<dees-tile-note
title="config.ts"
language="TypeScript"
.content=${codeString}
clickable
@tile-click=${handleClick}
></dees-tile-note>
```
**Key Features:**
- Monospace font with line numbers
- Language badge (top-right)
- Scrollable content on hover (mouse X position controls scroll)
description:'A comprehensive library that provides dynamic web components for building sophisticated and modern web applications using JavaScript and TypeScript.'
}
Reference in New Issue
Block a user
Blocking a user prevents them from interacting with repositories, such as opening or commenting on pull requests or issues. Learn more about blocking a user.
