YouTube Post

1"use client"
2 
3import { useState } from "react"
4import { Bookmark, MoreHorizontal, Share, EyeOff, Flag } from "lucide-react"
5import { demoYouTubePost } from './demo/social'
6import {
7  DropdownMenu,
8  DropdownMenuContent,
9  DropdownMenuItem,
10  DropdownMenuSeparator,
11  DropdownMenuTrigger,
12} from "@/components/ui/dropdown-menu"
13 
14/**
15 * ═══════════════════════════════════════════════════════════════════════════
16 * YouTubePostProps
17 * ═══════════════════════════════════════════════════════════════════════════
18 *
19 * Props for the YouTubePost component, which displays a YouTube video embed
20 * with thumbnail preview and click-to-play functionality.
21 */
22export interface YouTubePostProps {
23  data?: {
24    /** YouTube channel name. */
25    channel?: string
26    /** Channel avatar letter fallback or image URL. */
27    avatar?: string
28    /** Video title. */
29    title?: string
30    /** Formatted view count (e.g., "1M views"). */
31    views?: string
32    /** Time since video was published (e.g., "2 weeks ago"). */
33    time?: string
34    /** Video duration in MM:SS or HH:MM:SS format. */
35    duration?: string
36    /** URL of the video thumbnail image. */
37    thumbnail?: string
38    /** Formatted subscriber count for the channel. */
39    subscribers?: string
40    /** Whether the channel has a verified badge. */
41    verified?: boolean
42    /** YouTube video ID used for embedding the player. */
43    videoId?: string
44  }
45}
46 
47/**
48 * A YouTube video embed component with thumbnail preview and playback.
49 * Click the play button to load and play the embedded video.
50 *
51 * Features:
52 * - Thumbnail preview with YouTube play button
53 * - Duration badge overlay
54 * - Channel avatar and info
55 * - Verified channel badge
56 * - View count and publish time
57 * - Click-to-play video embedding
58 * - Dropdown menu (save, share, not interested, report)
59 *
60 * @component
61 * @example
62 * ```tsx
63 * <YouTubePost
64 *   data={{
65 *     channel: "Tech Channel",
66 *     avatar: "T",
67 *     title: "How to build amazing UIs",
68 *     views: "1M views",
69 *     time: "2 weeks ago",
70 *     duration: "18:42",
71 *     thumbnail: "https://img.youtube.com/vi/abc123/maxresdefault.jpg",
72 *     verified: true,
73 *     videoId: "abc123"
74 *   }}
75// … truncated