# Embeds

## Example

```svelte
<script lang="ts">
	import { Box } from '@foxui/all';
	import { EmbedImages, EmbedExternal, EmbedVideo, EmbedQuotedPost } from '@foxui/all';
</script>

<Box class="not-prose relative flex min-h-24 w-full flex-col gap-8">
	<div>
		<h3 class="text-base-600 dark:text-base-400 mb-2 text-sm font-medium">Images</h3>
		<EmbedImages
			data={{
				type: 'images',
				images: [
					{
						alt: 'A beautiful sunset',
						thumb: 'https://picsum.photos/seed/embed1/400/300',
						fullsize: 'https://picsum.photos/seed/embed1/1200/900',
						aspectRatio: { width: 4, height: 3 }
					},
					{
						alt: 'Mountain landscape',
						thumb: 'https://picsum.photos/seed/embed2/400/300',
						fullsize: 'https://picsum.photos/seed/embed2/1200/900',
						aspectRatio: { width: 4, height: 3 }
					}
				]
			}}
		/>
	</div>

	<div>
		<h3 class="text-base-600 dark:text-base-400 mb-2 text-sm font-medium">Images (sensitive)</h3>
		<EmbedImages
			data={{
				type: 'images',
				sensitive: true,
				images: [
					{
						alt: 'Hidden image',
						thumb: 'https://picsum.photos/seed/embed3/400/300',
						fullsize: 'https://picsum.photos/seed/embed3/1200/900',
						aspectRatio: { width: 4, height: 3 }
					}
				]
			}}
		/>
	</div>

	<div>
		<h3 class="text-base-600 dark:text-base-400 mb-2 text-sm font-medium">External Link</h3>
		<EmbedExternal
			data={{
				type: 'external',
				external: {
					href: 'https://flo-bit.dev',
					thumb: 'https://flo-bit.dev/og.jpg',
					title: "hi, i'm florian",
					description: 'full-stack software engineer based in berlin'
				}
			}}
		/>
	</div>

	<div>
		<h3 class="text-base-600 dark:text-base-400 mb-2 text-sm font-medium">Video (sensitive)</h3>
		<EmbedVideo
			data={{
				type: 'video',
				sensitive: true,
				video: {
					playlist: '',
					thumb: '',
					alt: 'A video',
					aspectRatio: { width: 16, height: 9 }
				}
			}}
		/>
	</div>

	<div>
		<h3 class="text-base-600 dark:text-base-400 mb-2 text-sm font-medium">Quoted Post</h3>
		<EmbedQuotedPost
			record={{
				author: {
					displayName: 'flo-bit',
					handle: 'flo-bit.dev',
					avatar: 'https://github.com/flo-bit.png'
				},
				htmlContent: 'This is a quoted post!',
				createdAt: new Date(Date.now() - 60000).toISOString()
			}}
		/>
	</div>
</Box>
```

## Documentation

## Usage

### Images

```svelte
<EmbedImages
	data={{
		type: 'images',
		images: [
			{
				alt: 'A photo',
				thumb: 'https://example.com/thumb.jpg',
				fullsize: 'https://example.com/full.jpg',
				aspectRatio: { width: 4, height: 3 }
			}
		]
	}}
	onclickimage={(image) => console.log(image)}
/>
```

### External Link

```svelte
<EmbedExternal
	data={{
		type: 'external',
		external: {
			href: 'https://example.com',
			thumb: 'https://example.com/og.jpg',
			title: 'Example Site',
			description: 'A description of the link'
		}
	}}
/>
```

### Video

```svelte
<EmbedVideo
	data={{
		type: 'video',
		video: {
			playlist: 'https://example.com/video.m3u8',
			thumb: 'https://example.com/poster.jpg',
			alt: 'A video',
			aspectRatio: { width: 16, height: 9 }
		}
	}}
/>
```

### Sensitive Content

The `EmbedImages` and `EmbedVideo` components support a `sensitive` prop that hides the content behind a click-to-reveal overlay.

```svelte
<EmbedImages sensitive data={...} />
<EmbedVideo sensitive data={...} />
```

## API Reference

### EmbedImages
Displays a grid of images with optional click handling and sensitive content overlay.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| data | `EmbedImageData` | `-` | The image embed data containing an array of images with alt text, thumbnails, and aspect ratios. Includes optional sensitive flag and onclick handler. (required) |
| showSensitive | `boolean` | `true` | Whether to show the sensitive content overlay when data.sensitive is true. |

### EmbedExternal
Displays an external link card with thumbnail, title, and domain.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| data | `EmbedExternalData` | `-` | The external link embed data containing href, thumbnail, title, and description. (required) |

### EmbedVideo
Displays an HLS video player with optional sensitive content overlay.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| data | `EmbedVideoData` | `-` | The video embed data containing playlist URL, thumbnail, alt text, aspect ratio, and optional sensitive flag. (required) |
| showSensitive | `boolean` | `true` | Whether to show the sensitive content overlay when data.sensitive is true. |

### EmbedQuotedPost
Displays a quoted/embedded post record.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| record | `EmbedRecordData` | `-` | The quoted post data including author, content, optional nested embed, and optional onclick/onclickhandle callbacks. (required) |
| showEmbed | `boolean` | `false` | Whether to show embeds within the quoted post. |

### EmbedRouter
Routes an embed to the correct component based on its type. Handles images, external links, video, and quoted posts.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| embed | `Embed` | `-` | The embed data to render. Each embed carries its own sensitive flag and callbacks. (required) |
| showSensitive | `boolean` | `true` | Whether to show the sensitive content overlay for flagged embeds. |