# Social Media Post

## Example

```svelte
<script lang="ts">
	import { Box, toast } from '@foxui/all';
	import { Post } from '@foxui/all';

	let liked = $state(false);
	let bookmarked = $state(false);
</script>

<Box class="not-prose relative flex min-h-24 w-full flex-col gap-8">
	<Post
		data={{
			author: {
				displayName: 'flo-bit',
				handle: 'flo-bit.dev',
				avatar: 'https://github.com/flo-bit.png',
				href: 'https://bsky.app/profile/flo-bit.dev'
			},
			createdAt: new Date(Date.now() - 10000).toISOString(),
			replyCount: 69,
			repostCount: 42,
			likeCount: 420,
		}}
		onReplyClick={() => {
			toast('You clicked on reply');
		}}
		onRepostClick={() => {
			toast('You clicked on repost');
		}}
		onLikeClick={() => {
			liked = !liked;
		}}
		liked={liked}
		onBookmarkClick={() => {
			bookmarked = !bookmarked;
		}}
		bookmarked={bookmarked}
	>
		Hello, world!
	</Post>
</Box>
```

## Documentation

## Usage

```svelte
<Post
	data={{
		author: {
			displayName: 'flo-bit',
			handle: 'flo-bit.dev',
			avatar: 'https://github.com/flo-bit.png',
			href: 'https://github.com/flo-bit'
		},
		createdAt: new Date().toISOString(),
		replyCount: 69,
		repostCount: 42,
		likeCount: 420
	}}
>
	Hello, world!
</Post>
```

## API Reference

### Post
A social media post component with avatar, text, images, video, quotes, and action buttons.

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| data | `PostData` | `-` | The post data including author info, text, images, video, timestamp, and engagement counts. See PostData type for full structure. (required) |
| showAvatar | `boolean` | `true` | Whether to show the author avatar. |
| compact | `boolean` | `false` | Whether to use a compact layout. |
| showImages | `boolean` | `true` | Whether to show attached images. |
| showVideo | `boolean` | `true` | Whether to show attached video. |
| showExternal | `boolean` | `true` | Whether to show external link cards. |
| showQuotes | `boolean` | `true` | Whether to show quoted posts. |
| showReply | `boolean` | `true` | Whether to show the reply action button. (bindable) |
| showRepost | `boolean` | `true` | Whether to show the repost action button. (bindable) |
| showLike | `boolean` | `true` | Whether to show the like action button. (bindable) |
| showBookmark | `boolean` | `true` | Whether to show the bookmark action button. (bindable) |
| liked | `boolean` | `false` | Whether the post is liked. (bindable) |
| bookmarked | `boolean` | `false` | Whether the post is bookmarked. (bindable) |
| onReplyClick | `() => void` | `-` | Callback when the reply button is clicked. |
| onRepostClick | `() => void` | `-` | Callback when the repost button is clicked. |
| onLikeClick | `() => void` | `-` | Callback when the like button is clicked. |
| onBookmarkClick | `() => void` | `-` | Callback when the bookmark button is clicked. |
| onclickimage | `(image: PostImageData) => void` | `-` | Callback when a post image is clicked. |
| onclickpost | `(data: PostData | QuotedPostData, href?: string) => void` | `-` | Callback when the post body is clicked. |
| onclickhandle | `(handle: string, href?: string) => void` | `-` | Callback when the author handle is clicked. |
| replyHref | `string` | `-` | URL for the reply action link. |
| repostHref | `string` | `-` | URL for the repost action link. |
| likeHref | `string` | `-` | URL for the like action link. |
| timestampHref | `string` | `-` | URL for the timestamp link. |
| ontimestampclick | `() => void` | `-` | Callback when the timestamp is clicked. |
| customActions | `Snippet` | `-` | Custom action buttons to display alongside the default actions. |
| logo | `Snippet` | `-` | Custom logo snippet displayed in the post header. |
| children | `Snippet` | `-` | Additional content rendered below the post. |
| class | `string` | `-` | Additional CSS classes to apply. |
| ref | `HTMLElement` | `-` | The underlying DOM element. (bindable) |