Instagram Post

1"use client"
2 
3import { Heart, MessageCircle, Send, Bookmark, MoreHorizontal, Flag, UserMinus, Link, Code } from "lucide-react"
4import { demoInstagramPost } from './demo/social'
5import {
6  DropdownMenu,
7  DropdownMenuContent,
8  DropdownMenuItem,
9  DropdownMenuSeparator,
10  DropdownMenuTrigger,
11} from "@/components/ui/dropdown-menu"
12 
13/**
14 * ═══════════════════════════════════════════════════════════════════════════
15 * InstagramPostProps
16 * ═══════════════════════════════════════════════════════════════════════════
17 *
18 * Props for the InstagramPost component, which displays an Instagram-style
19 * post with image, caption, and engagement actions.
20 */
21export interface InstagramPostProps {
22  data?: {
23    /** Author's Instagram username. */
24    author?: string
25    /** Avatar letter fallback or image URL for the profile picture. */
26    avatar?: string
27    /** URL of the post image to display. */
28    image?: string
29    /** Formatted like count (e.g., "2,847"). */
30    likes?: string
31    /** Post caption text content. */
32    caption?: string
33    /** Time since posted (e.g., "2 hours ago"). */
34    time?: string
35    /** Whether the author has a verified badge. */
36    verified?: boolean
37  }
38}
39 
40/**
41 * An Instagram post embed component with image, caption, and engagement.
42 * Displays the post with like, comment, share, and save actions.
43 *
44 * Features:
45 * - Square aspect ratio image display
46 * - Gradient avatar ring for stories indicator
47 * - Verified badge support
48 * - Action buttons (like, comment, share, save)
49 * - Dropdown menu (report, unfollow, copy link, embed)
50 * - Like count and caption display
51 *
52 * @component
53 * @example
54 * ```tsx
55 * <InstagramPost
56 *   data={{
57 *     author: "manifest.ai",
58 *     avatar: "M",
59 *     image: "https://example.com/photo.jpg",
60 *     likes: "2,847",
61 *     caption: "Check out this amazing view!",
62 *     time: "2 hours ago",
63 *     verified: true
64 *   }}
65 * />
66 * ```
67 */
68export function InstagramPost({ data }: InstagramPostProps) {
69  const resolved: NonNullable<InstagramPostProps['data']> = data ?? demoInstagramPost
70  const author = resolved?.author
71  const avatar = resolved?.avatar
72  const image = resolved?.image
73// … truncated