{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "content-calendar-matrix", "title": "Content Calendar Matrix", "type": "registry:block", "files": [ { "path": "packages/registry-react/blocks/content-calendar-matrix/ContentCalendarMatrix.tsx", "content": "'use client'\n\nimport * as React from 'react'\nimport {\n Calendar,\n CalendarCheck,\n CalendarDays,\n CheckCircle2,\n Clock,\n FileText,\n Layers,\n Mail,\n MoreHorizontal,\n Pencil,\n PenLine,\n Plus,\n Search,\n Share2,\n Trash2,\n UserCheck,\n Video,\n} from 'lucide-react'\nimport { cn } from '@/lib/utils'\nimport { Avatar, AvatarFallback } from '@/components/ui/avatar'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\nimport { Card, CardContent } from '@/components/ui/card'\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuSeparator,\n DropdownMenuTrigger,\n} from '@/components/ui/dropdown-menu'\nimport { Input } from '@/components/ui/input'\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'\nimport { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'\n\nexport type ContentChannel = 'all' | 'blog' | 'newsletter' | 'youtube' | 'social'\nexport type ContentStatus = 'published' | 'scheduled' | 'in_review' | 'draft'\n\nexport interface ContentItem {\n id: string\n title: string\n channel: 'blog' | 'newsletter' | 'youtube' | 'social'\n channelLabel: string\n publishDate: string\n publishTime: string\n author: {\n name: string\n role: string\n avatar: string\n }\n status: ContentStatus\n statusLabel: string\n keywords: string[]\n format: string\n}\n\nexport interface ContentCalendarMatrixProps {\n title?: string\n subtitle?: string\n className?: string\n}\n\nconst pacingKpis = [\n {\n id: 'planned',\n title: 'Total Planned Content',\n value: '24',\n unit: 'Pieces this month',\n note: '24 Pieces this month',\n subtext: '+6 pieces vs previous month',\n icon: Layers,\n colorClass: 'text-primary bg-primary/10',\n },\n {\n id: 'scheduled',\n title: 'Scheduled for Publish',\n value: '8',\n unit: 'items ready',\n note: '8 items ready',\n subtext: 'Next drop: Sep 08 · 02:00 PM EST',\n icon: CalendarCheck,\n colorClass: 'text-info bg-info/10',\n },\n {\n id: 'in-review',\n title: 'In Review / Drafting',\n value: '12',\n unit: 'in progress',\n note: '12 in progress',\n subtext: '7 in editorial review · 5 in drafting',\n icon: PenLine,\n colorClass: 'text-warning bg-warning/10',\n },\n {\n id: 'published',\n title: 'Published this Month',\n value: '4',\n unit: 'live',\n note: '4 live',\n subtext: '100% on-schedule publishing rate',\n icon: CheckCircle2,\n colorClass: 'text-success bg-success/10',\n },\n]\n\nconst channelConfig: Record<\n 'blog' | 'newsletter' | 'youtube' | 'social',\n { label: string; badgeClass: string; icon: React.ComponentType<{ className?: string }> }\n> = {\n blog: {\n label: 'Blog',\n badgeClass: 'bg-info/10 text-info border-info/20',\n icon: FileText,\n },\n newsletter: {\n label: 'Newsletter',\n badgeClass: 'bg-chart-1/10 text-chart-1 border-chart-1/20',\n icon: Mail,\n },\n youtube: {\n label: 'YouTube',\n badgeClass: 'bg-destructive/10 text-destructive border-destructive/20',\n icon: Video,\n },\n social: {\n label: 'Social',\n badgeClass: 'bg-info/10 text-info border-info/20',\n icon: Share2,\n },\n}\n\nconst statusConfig: Record = {\n published: {\n label: 'Published',\n badgeClass: 'bg-success/10 text-success border-success/20',\n dotClass: 'bg-success',\n },\n scheduled: {\n label: 'Scheduled',\n badgeClass: 'bg-info/10 text-info border-info/20',\n dotClass: 'bg-info',\n },\n in_review: {\n label: 'In Review',\n badgeClass: 'bg-warning/10 text-warning border-warning/20',\n dotClass: 'bg-warning',\n },\n draft: {\n label: 'Draft',\n badgeClass: 'bg-muted text-muted-foreground border-border',\n dotClass: 'bg-muted-foreground',\n },\n}\n\nconst contentItems: ContentItem[] = [\n {\n id: 'cnt-01',\n title: 'Deep Dive: Headless Reka UI Primitives in Vue 3.5',\n channel: 'blog',\n channelLabel: 'Blog',\n publishDate: 'Sep 04',\n publishTime: '10:00 AM EST',\n author: {\n name: 'Sarah Chen',\n role: 'Lead Developer Advocate',\n avatar: 'SC',\n },\n status: 'published',\n statusLabel: 'Published',\n keywords: ['#vue3', '#reka-ui', '#frontend'],\n format: 'Technical Guide',\n },\n {\n id: 'cnt-02',\n title: 'Building Zero-Runtime Design Systems with Tailwind CSS v4',\n channel: 'youtube',\n channelLabel: 'YouTube',\n publishDate: 'Sep 08',\n publishTime: '02:00 PM EST',\n author: {\n name: 'Marcus Vance',\n role: 'Senior UI Engineer',\n avatar: 'MV',\n },\n status: 'scheduled',\n statusLabel: 'Scheduled',\n keywords: ['#tailwindcss', '#design-systems', '#webdev'],\n format: 'Video Tutorial',\n },\n {\n id: 'cnt-03',\n title: 'Frontend Weekly #142: Subgrid Mastery & CSS Anchor Positioning',\n channel: 'newsletter',\n channelLabel: 'Newsletter',\n publishDate: 'Sep 12',\n publishTime: '09:00 AM EST',\n author: {\n name: 'Elena Rostova',\n role: 'Technical Editor',\n avatar: 'ER',\n },\n status: 'scheduled',\n statusLabel: 'Scheduled',\n keywords: ['#css', '#newsletter', '#subgrid'],\n format: 'Email Dispatch',\n },\n {\n id: 'cnt-04',\n title: 'Accessible Command Palettes & Keyboard Shortcuts Architecture',\n channel: 'blog',\n channelLabel: 'Blog',\n publishDate: 'Sep 16',\n publishTime: '11:30 AM EST',\n author: {\n name: 'David Kim',\n role: 'Accessibility Specialist',\n avatar: 'DK',\n },\n status: 'in_review',\n statusLabel: 'In Review',\n keywords: ['#a11y', '#cmdk', '#keyboard-nav'],\n format: 'Deep Dive',\n },\n {\n id: 'cnt-05',\n title: 'Product Drop: 12 New Enterprise Blocks for Nuxt 4 & React',\n channel: 'social',\n channelLabel: 'Social',\n publishDate: 'Sep 21',\n publishTime: '04:00 PM EST',\n author: {\n name: 'Aisha Patel',\n role: 'Product Marketing Lead',\n avatar: 'AP',\n },\n status: 'in_review',\n statusLabel: 'In Review',\n keywords: ['#changelog', '#uipkge', '#react', '#vue'],\n format: 'Social Campaign',\n },\n {\n id: 'cnt-06',\n title: 'Micro-Interactions & Spring Physics in Modern Web Applications',\n channel: 'youtube',\n channelLabel: 'YouTube',\n publishDate: 'Sep 26',\n publishTime: '01:15 PM EST',\n author: {\n name: 'Lucas Meyer',\n role: 'Motion Designer',\n avatar: 'LM',\n },\n status: 'draft',\n statusLabel: 'Draft',\n keywords: ['#animation', '#spring-physics', '#ui-motion'],\n format: 'Interactive Workshop',\n },\n]\n\nconst channelFilters: Array<{\n value: ContentChannel\n label: string\n icon: React.ComponentType<{ className?: string }>\n}> = [\n { value: 'all', label: 'All Channels', icon: Layers },\n { value: 'blog', label: 'Blog', icon: FileText },\n { value: 'newsletter', label: 'Newsletter', icon: Mail },\n { value: 'youtube', label: 'YouTube', icon: Video },\n { value: 'social', label: 'Social', icon: Share2 },\n]\n\nexport function ContentCalendarMatrix({\n title = 'Editorial Content Calendar',\n subtitle = 'Schedule, organize, and track cross-channel editorial pipelines and publishing milestones.',\n className,\n}: ContentCalendarMatrixProps) {\n const [selectedMonth, setSelectedMonth] = React.useState('2026-09')\n const [selectedChannel, setSelectedChannel] = React.useState('all')\n const [searchQuery, setSearchQuery] = React.useState('')\n\n const filteredItems = React.useMemo(() => {\n const query = searchQuery.trim().toLowerCase()\n return contentItems.filter((item) => {\n const matchesChannel = selectedChannel === 'all' || item.channel === selectedChannel\n const matchesQuery =\n !query ||\n item.title.toLowerCase().includes(query) ||\n item.author.name.toLowerCase().includes(query) ||\n item.keywords.some((k) => k.toLowerCase().includes(query))\n return matchesChannel && matchesQuery\n })\n }, [selectedChannel, searchQuery])\n\n return (\n
\n {/* Header Section */}\n
\n
\n
\n

{title}

\n \n Editorial Desk\n \n
\n

{subtitle}

\n
\n\n
\n {/* Month Selector */}\n \n\n {/* New Content Item Primary Button */}\n \n
\n
\n\n {/* 4 Editorial Pacing KPI Cards */}\n
\n {pacingKpis.map((kpi) => {\n const Icon = kpi.icon\n return (\n \n \n
\n

{kpi.title}

\n
\n \n
\n
\n\n
\n
\n {kpi.value}\n {kpi.unit}\n
\n

{kpi.subtext}

\n
\n \n \n )\n })}\n
\n\n {/* Pipeline & Matrix Controls Bar */}\n
\n {/* Channel Filters */}\n
\n {channelFilters.map((filter) => {\n const Icon = filter.icon\n return (\n setSelectedChannel(filter.value)}\n >\n \n {filter.label}\n \n )\n })}\n
\n\n {/* Keyword / Title Search Input */}\n
\n \n setSearchQuery(e.target.value)}\n type=\"text\"\n placeholder=\"Filter by keyword or title...\"\n className=\"h-8 pl-8 text-xs shadow-xs\"\n />\n
\n
\n\n {/* Content Publishing Pipeline Table */}\n
\n \n \n \n Publish Date & Time\n Content Title\n Channel\n Author\n Status\n SEO / Keywords\n \n Actions\n \n \n \n \n {filteredItems.map((item) => {\n const ChannelIcon = channelConfig[item.channel].icon\n return (\n \n {/* Publish Date & Time */}\n \n
\n \n \n {item.publishDate} · {item.publishTime}\n \n
\n \n\n {/* Content Title */}\n \n
\n

{item.title}

\n

{item.format}

\n
\n \n\n {/* Channel Badge */}\n \n \n \n {channelConfig[item.channel].label}\n \n \n\n {/* Author (Avatar + Name) */}\n \n
\n \n \n {item.author.avatar}\n \n \n
\n

{item.author.name}

\n

{item.author.role}

\n
\n
\n \n\n {/* Status Badge */}\n \n \n \n {statusConfig[item.status].label}\n \n \n\n {/* SEO / Target Keywords */}\n \n
\n {item.keywords.map((keyword) => (\n \n {keyword}\n \n ))}\n
\n \n\n {/* Actions Dropdown */}\n \n \n \n \n \n \n Manage Content\n \n \n \n Edit item\n \n \n \n Reschedule\n \n \n \n Assign reviewer\n \n \n \n \n Delete item\n \n \n \n \n \n )\n })}\n\n {filteredItems.length === 0 && (\n \n \n No content items found matching the selected channel filter or search query.\n \n \n )}\n \n
\n
\n\n {/* Publishing Matrix Footer */}\n
\n

\n Showing {filteredItems.length} of{' '}\n {contentItems.length} scheduled content\n pieces for September 2026\n

\n
\n \n \n
\n
\n
\n )\n}\n", "type": "registry:block", "target": "~/components/blocks/ContentCalendarMatrix.tsx" } ], "dependencies": [ "lucide-react" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/react/avatar.json", "https://uipkge.dev/r/react/badge.json", "https://uipkge.dev/r/react/button.json", "https://uipkge.dev/r/react/card.json", "https://uipkge.dev/r/react/dropdown-menu.json", "https://uipkge.dev/r/react/input.json", "https://uipkge.dev/r/react/select.json", "https://uipkge.dev/r/react/table.json" ], "description": "Editorial publishing calendar and content matrix with pacing KPI summary cards, channel filter tabs, month picker, publication status pipeline, author avatars, SEO keywords, and contextual action menus.", "categories": [ "media", "app", "marketing" ] }