{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "social-media-post-scheduler", "title": "Social Media Post Scheduler", "type": "registry:page", "files": [ { "path": "packages/registry-angular/blocks/social-media-post-scheduler/social-media-post-scheduler.component.ts", "content": "// Multi-platform social media composer and post scheduler. Features channel toggles,\n// rich text composer with emoji & hashtag insertion, character counter, media upload\n// preview, scheduled time picker with best-time recommendations, auto-repost toggle,\n// and high-fidelity live social feed previews for X (Twitter), LinkedIn, Instagram,\n// and Threads. Port of the Vue/React block 1:1.\nimport { ChangeDetectionStrategy, Component, Input, computed, signal } from '@angular/core'\nimport {\n Bookmark,\n Calendar,\n Check,\n CheckCircle2,\n Clock,\n Eye,\n Globe,\n Heart,\n Image as ImageIcon,\n LucideAngularModule,\n MessageCircle,\n MessageSquare,\n MoreHorizontal,\n Repeat2,\n Send,\n Share2,\n Sparkles,\n ThumbsUp,\n Trash2,\n UploadCloud,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent, UiAvatarImageComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport { UiSeparatorComponent } from '@/ui/separator/separator.component'\nimport { UiSwitchComponent } from '@/ui/switch/switch.component'\nimport {\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n} from '@/ui/tabs/tabs.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nconst defaultContent =\n 'Excited to announce the new component release for our open source design system! 🚀 Built with accessible keyboard ergonomics, fluid motion, and crisp token hierarchy out of the box.\\n\\n#UI #Developer #OpenSource'\n\nconst author = {\n name: 'Alex Morgan',\n role: 'Staff Product Engineer',\n headline: 'Staff Product Engineer · Building open-source UI design systems & web tools',\n twitterHandle: '@alexmorgan_dev',\n instagramHandle: 'alexmorgan.dev',\n threadsHandle: 'alexmorgan',\n avatar: 'https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=256&auto=format&fit=crop',\n initials: 'AM',\n}\n\nconst sampleImages = [\n {\n id: 'dashboard',\n label: 'Dashboard Preview',\n url: 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1200&auto=format&fit=crop',\n dimensions: '1200 × 675 px · 284 KB',\n aspect: '16:9 Landscape',\n },\n {\n id: 'workspace',\n label: 'Dev Workspace',\n url: 'https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=1200&auto=format&fit=crop',\n dimensions: '1200 × 800 px · 340 KB',\n aspect: '3:2 Photo',\n },\n {\n id: 'design',\n label: 'Design Canvas',\n url: 'https://images.unsplash.com/photo-1507238691740-187a5b1d37b8?q=80&w=1200&auto=format&fit=crop',\n dimensions: '1080 × 1080 px · 410 KB',\n aspect: '1:1 Square',\n },\n]\n\nconst suggestedHashtags = [\n '#UI',\n '#Developer',\n '#OpenSource',\n '#DesignSystem',\n '#WebDev',\n '#Frontend',\n '#Tech',\n '#SaaS',\n]\nconst quickEmojis = ['🚀', '✨', '💡', '🔥', '📊', '🧵', '🎉', '⚡', '👇', '🎯']\nconst timeSlots = ['09:00 AM EST', '10:00 AM EST', '01:30 PM EST', '05:00 PM EST']\n\nconst platformLimits: Record = {\n twitter: { name: 'X (Twitter)', limit: 280 },\n threads: { name: 'Threads', limit: 500 },\n instagram: { name: 'Instagram', limit: 2200 },\n linkedin: { name: 'LinkedIn', limit: 3000 },\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-social-media-post-scheduler, [ui-social-media-post-scheduler]',\n standalone: true,\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiAvatarImageComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardFooterComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiInputComponent,\n UiSeparatorComponent,\n UiSwitchComponent,\n UiTabsComponent,\n UiTabsContentComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n \n \n
\n
\n
\n \n
\n

Social Post Composer & Scheduler

\n \n {{ selectedChannels().length }} / 4 Networks\n \n
\n

\n Compose, calibrate, and orchestrate cross-platform social broadcasts with live authentic previews.\n

\n
\n\n
\n \n \n
\n \n\n \n @if (notificationMessage(); as msg) {\n
\n
\n @if (notificationType() === 'success') {\n \n } @else {\n \n }\n {{ msg }}\n
\n \n \n \n
\n }\n\n \n
\n \n
\n \n
\n
\n
\n

Publishing Channels

\n Select all target feeds\n
\n

Toggle the target social accounts for this scheduled broadcast.

\n
\n
\n
\n \n
\n
\n \n \n \n
\n
\n @if (isChannelSelected('twitter')) {\n \n }\n
\n
\n
\n
X / Twitter
\n
280 chars
\n
\n \n\n \n
\n
\n \n \n \n
\n
\n @if (isChannelSelected('linkedin')) {\n \n }\n
\n
\n
\n
LinkedIn
\n
3,000 chars
\n
\n \n\n \n
\n \n \n \n \n
\n
\n @if (isChannelSelected('instagram')) {\n \n }\n
\n
\n
\n
Instagram
\n
2,200 chars
\n
\n \n\n \n
\n
\n \n \n \n
\n
\n @if (isChannelSelected('threads')) {\n \n }\n
\n
\n
\n
Threads
\n
500 chars
\n
\n \n
\n
\n
\n\n \n
\n
\n
\n

Post Content

\n \n \n AI Polish\n \n
\n
\n
\n
\n \n
\n
\n @for (emoji of emojis; track emoji) {\n \n {{ emoji }}\n \n }\n
\n
\n \n {{ currentLength() }} / {{ currentPlatformLimit() }}\n \n
\n
\n
\n
\n Recommended Hashtags\n
\n @for (tag of hashtags; track tag) {\n \n }\n
\n
\n
\n
\n\n \n
\n
\n
\n

Media Attachment

\n @if (mediaUrl()) {\n Attached\n } @else {\n Optional\n }\n
\n
\n
\n @if (mediaUrl(); as url) {\n \n
\n
\n \"Post\n
\n
\n
product-launch-graphic.png
\n
1200 × 675 px · 284 KB
\n 16:9 Aspect\n
\n
\n
\n \n \n Remove\n \n
\n
\n } @else {\n \n
\n \n
\n

Drag & drop media attachment

\n

PNG, JPG, GIF or MP4 up to 25MB

\n
\n }\n
\n Quick Sample Media:\n
\n @for (sample of samples; track sample.id) {\n \n }\n
\n
\n
\n \n\n \n
\n
\n

Schedule Settings

\n

Determine publish timing and automated amplification rules.

\n
\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n
\n Optimal window: 10:00 AM EST\n

\n Based on your audience timezone, posting between 09:30 AM – 10:30 AM EST generates +34% higher\n average CTR.\n

\n
\n @for (slot of slots; track slot) {\n \n }\n
\n
\n
\n \n
\n
\n
\n Auto-repost evergreen content\n

\n Reshuffle and repost to X & Threads after 24h if initial engagement crosses 100 interactions.\n

\n
\n \n
\n
\n
\n Auto-append first comment / thread link\n

\n Places outbound GitHub & documentation links in the first comment to avoid algorithm penalty.\n

\n
\n \n
\n
\n
\n
\n \n\n \n
\n
\n
\n
\n
\n

Live Social Feed Preview

\n \n \n Live Sync\n \n
\n \n Scheduled: {{ scheduledDate() }} · {{ scheduledTime() }}\n \n
\n

\n Preview pixel-accurate mockups in authentic platform containers.\n

\n
\n\n
\n \n \n \n \n \n \n \n\n \n
\n
\n \n \n {{ profile.initials }}\n \n
\n
\n
\n {{ profile.name }}\n \n \n \n {{ profile.twitterHandle }}\n · Scheduled\n
\n \n
\n
\n @for (seg of segments(); track $index) {\n @if (seg.isHashtag) {\n {{ seg.text }}\n } @else {\n {{ seg.text }}\n }\n }\n @if (!content()) {\n Post body is empty...\n }\n
\n @if (mediaUrl(); as url) {\n
\n \"Post\n
\n }\n
\n \n Will publish on {{ scheduledDate() }} at {{ scheduledTime() }}\n
\n \n
\n \n \n 24\n \n \n \n 12\n \n \n \n {{ isLikedInPreview() ? 159 : 158 }}\n \n \n \n 4.2K\n \n
\n \n \n
\n
\n
\n
\n
\n \n\n \n
\n
\n
\n \n \n {{ profile.initials }}\n \n
\n
\n {{ profile.name }}\n • 1st\n
\n

{{ profile.headline }}

\n
\n Scheduled ({{ scheduledDate() }})\n •\n \n
\n
\n
\n \n
\n
\n @for (seg of segments(); track $index) {\n @if (seg.isHashtag) {\n {{ seg.text }}\n } @else {\n {{ seg.text }}\n }\n }\n @if (!content()) {\n Post body is empty...\n }\n
\n @if (mediaUrl(); as url) {\n
\n \"Post\n
\n }\n
\n
\n
\n 👍\n ❤️\n 💡\n
\n 89\n
\n 14 comments · 6 reposts\n
\n \n
\n \n \n Like\n \n \n \n Comment\n \n \n \n Repost\n \n \n \n Send\n \n
\n
\n \n\n \n
\n
\n
\n
\n \n \n {{ profile.initials }}\n \n
\n
\n
{{ profile.instagramHandle }}
\n
San Francisco, California
\n
\n
\n \n
\n
\n @if (mediaUrl(); as url) {\n \"Instagram\n } @else {\n \n \n

Attach an image on the left to see Instagram photo preview

\n
\n }\n
\n
\n
\n
\n \n \n \n
\n \n
\n
\n {{ isLikedInPreview() ? '343 likes' : '342 likes' }}\n
\n
\n {{ profile.instagramHandle }}\n @for (seg of segments(); track $index) {\n @if (seg.isHashtag) {\n {{ seg.text }}\n } @else {\n {{ seg.text }}\n }\n }\n
\n
View all 28 comments
\n
\n SCHEDULED FOR {{ scheduledDate() }} · {{ scheduledTime() }}\n
\n
\n
\n \n\n \n
\n
\n
\n \n \n {{ profile.initials }}\n \n
\n
\n
\n
\n
\n {{ profile.threadsHandle }}\n \n \n \n · Scheduled\n
\n \n
\n
\n @for (seg of segments(); track $index) {\n @if (seg.isHashtag) {\n {{\n seg.text\n }}\n } @else {\n {{ seg.text }}\n }\n }\n @if (!content()) {\n Post body is empty...\n }\n
\n @if (mediaUrl(); as url) {\n
\n \"Post\n
\n }\n
\n \n \n \n \n
\n
48 replies · 312 likes
\n
\n
\n
\n \n \n
\n\n \n Synchronized with Buffer & Hootsuite OAuth queues\n
\n \n 4 channels ready\n
\n \n \n
\n \n \n `,\n})\nexport class UiSocialMediaPostSchedulerComponent {\n protected readonly Bookmark = Bookmark\n protected readonly Calendar = Calendar\n protected readonly Check = Check\n protected readonly CheckCircle2 = CheckCircle2\n protected readonly Clock = Clock\n protected readonly Eye = Eye\n protected readonly Globe = Globe\n protected readonly Heart = Heart\n protected readonly ImageIcon = ImageIcon\n protected readonly MessageCircle = MessageCircle\n protected readonly MessageSquare = MessageSquare\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Repeat2 = Repeat2\n protected readonly Send = Send\n protected readonly Share2 = Share2\n protected readonly Sparkles = Sparkles\n protected readonly ThumbsUp = ThumbsUp\n protected readonly Trash2 = Trash2\n protected readonly UploadCloud = UploadCloud\n protected readonly X = X\n\n @Input() set initialContent(v: string | undefined) {\n if (v !== undefined) this.content.set(v)\n }\n @Input() set initialChannels(v: string[] | undefined) {\n if (v !== undefined) this.selectedChannels.set([...v])\n }\n @Input() set initialMediaUrl(v: string | undefined) {\n if (v !== undefined) this.mediaUrl.set(v ?? null)\n }\n @Input() set initialDate(v: string | undefined) {\n if (v !== undefined) this.scheduledDate.set(v)\n }\n @Input() set initialTime(v: string | undefined) {\n if (v !== undefined) this.scheduledTime.set(v)\n }\n @Input() set initialAutoRepost(v: boolean | undefined) {\n if (v !== undefined) this.autoRepost.set(!!v)\n }\n\n readonly content = signal(defaultContent)\n readonly selectedChannels = signal(['twitter', 'linkedin', 'instagram', 'threads'])\n readonly activeTab = signal('twitter')\n readonly mediaUrl = signal(\n 'https://images.unsplash.com/photo-1551288049-bebda4e38f71?q=80&w=1200&auto=format&fit=crop',\n )\n readonly scheduledDate = signal('2026-08-25')\n readonly scheduledTime = signal('10:00 AM EST')\n readonly autoRepost = signal(true)\n readonly firstCommentThread = signal(true)\n readonly isLikedInPreview = signal(false)\n readonly notificationMessage = signal(null)\n readonly notificationType = signal<'success' | 'draft'>('success')\n\n readonly profile = author\n readonly samples = sampleImages\n readonly hashtags = suggestedHashtags\n readonly emojis = quickEmojis\n readonly slots = timeSlots\n\n readonly currentLength = computed(() => this.content().length)\n readonly currentPlatformLimit = computed(() => platformLimits[this.activeTab()]?.limit ?? 280)\n readonly isOverLimit = computed(() => this.currentLength() > this.currentPlatformLimit())\n readonly isWarningLimit = computed(\n () => this.currentLength() > this.currentPlatformLimit() - 40 && !this.isOverLimit(),\n )\n\n readonly segments = computed(() => {\n const text = this.content()\n if (!text) return []\n return text.split(/(\\s+)/).map((word) => ({\n text: word,\n isHashtag: word.startsWith('#') && word.length > 1,\n }))\n })\n\n counterVariant(): 'destructive' | 'warning' | 'secondary' {\n if (this.isOverLimit()) return 'destructive'\n if (this.isWarningLimit()) return 'warning'\n return 'secondary'\n }\n\n get notificationClass(): string {\n return cn(\n 'flex items-center justify-between rounded-lg border p-3.5 text-sm shadow-xs transition-colors',\n this.notificationType() === 'success'\n ? 'border-success/30 bg-success/10 text-success'\n : 'bg-primary/10 border-primary/20 text-primary',\n )\n }\n\n channelClass(channelId: string, activeClasses: string): string {\n return cn(\n 'group focus-visible:ring-ring relative flex flex-col items-start gap-1.5 rounded-lg border p-3 text-left transition-colors focus-visible:ring-2 focus-visible:outline-none',\n this.isChannelSelected(channelId) ? activeClasses : 'border-border bg-card hover:bg-accent/50 opacity-65',\n )\n }\n\n checkClass(channelId: string, activeClasses: string): string {\n return cn(\n 'flex size-4 items-center justify-center rounded-full text-xs',\n this.isChannelSelected(channelId) ? activeClasses : 'border-border border',\n )\n }\n\n hashtagClass(tag: string): string {\n return cn(\n 'focus-visible:ring-ring min-h-6 rounded-md border px-2 py-0.5 text-xs font-medium transition-colors focus-visible:ring-1 focus-visible:outline-none',\n this.content().includes(tag)\n ? 'border-primary/40 bg-primary/10 text-primary'\n : 'border-border bg-card text-muted-foreground hover:border-foreground/30 hover:text-foreground',\n )\n }\n\n sampleClass(url: string): string {\n return cn(\n 'focus-visible:ring-ring min-h-6 rounded-md border px-2.5 py-1 text-xs font-medium transition-colors focus-visible:ring-1 focus-visible:outline-none',\n this.mediaUrl() === url\n ? 'border-primary bg-primary/10 text-primary'\n : 'border-border bg-card text-muted-foreground hover:text-foreground',\n )\n }\n\n slotClass(slot: string): string {\n return cn(\n 'focus-visible:ring-ring min-h-6 rounded border px-2 py-0.5 text-xs transition-colors focus-visible:ring-1 focus-visible:outline-none',\n this.scheduledTime() === slot\n ? 'border-primary bg-primary text-primary-foreground font-medium'\n : 'border-border bg-card text-muted-foreground hover:text-foreground',\n )\n }\n\n toggleChannel(channelId: string): void {\n this.selectedChannels.update((prev) => {\n if (prev.includes(channelId)) {\n if (prev.length > 1) return prev.filter((c) => c !== channelId)\n return prev\n }\n return [...prev, channelId]\n })\n }\n\n isChannelSelected(channelId: string): boolean {\n return this.selectedChannels().includes(channelId)\n }\n\n insertHashtag(tag: string): void {\n const current = this.content()\n if (current.includes(tag)) return\n this.content.set(!current.trim() ? tag : `${current.trim()} ${tag}`)\n }\n\n insertEmoji(emoji: string): void {\n this.content.update((prev) => `${prev}${emoji}`)\n }\n\n polishWithAi(): void {\n this.content.set(\n '🚀 Excited to announce our newest UI component release! Built with zero-dependency headless primitives, fluid spring physics, and full OKLCH dark mode tokens.\\n\\nExplore the interactive playground & let us know your thoughts below! 👇\\n\\n#UI #Developer #OpenSource #DesignSystem',\n )\n }\n\n setPresetImage(url: string): void {\n this.mediaUrl.set(url)\n }\n\n removeMedia(): void {\n this.mediaUrl.set(null)\n }\n\n saveDraft(): void {\n this.notificationType.set('draft')\n this.notificationMessage.set(\n 'Post draft saved locally. All changes, media attachments, and channel targets are up to date.',\n )\n }\n\n schedulePost(): void {\n this.notificationType.set('success')\n this.notificationMessage.set(\n `Post scheduled for ${this.scheduledDate()} at ${this.scheduledTime()} across ${this.selectedChannels().length} connected channels!`,\n )\n }\n\n dismissNotification(): void {\n this.notificationMessage.set(null)\n }\n\n toggleLike(): void {\n this.isLikedInPreview.update((v) => !v)\n }\n}\n", "type": "registry:page", "target": "~/src/app/components/blocks/social-media-post-scheduler/social-media-post-scheduler.component.ts" }, { "path": "packages/registry-angular/blocks/social-media-post-scheduler/index.ts", "content": "export { UiSocialMediaPostSchedulerComponent } from './social-media-post-scheduler.component'\n", "type": "registry:page", "target": "~/src/app/components/blocks/social-media-post-scheduler/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/separator.json", "https://uipkge.dev/r/angular/switch.json", "https://uipkge.dev/r/angular/tabs.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "Multi-platform social media composer and post scheduler. Features channel toggles, rich text composer with emoji & hashtag insertion, character counter, media upload preview, scheduled time picker with best-time recommendations, auto-repost toggle, and high-fidelity live social feed previews for X (Twitter), LinkedIn, Instagram, and Threads.", "categories": [ "marketing", "app" ] }