"use client"; import React, { useState } from "react"; import { motion, AnimatePresence } from "framer-motion"; import { AreaChart, Area, XAxis, Tooltip, ResponsiveContainer, BarChart, Bar, Cell } from "recharts"; import { Instagram, Twitter, Linkedin, Youtube, Plus, Calendar as CalendarIcon, LayoutGrid, BarChart3, MessageCircle, Image as ImageIcon, MoreHorizontal, Heart, Share2, Eye, CheckCircle2, Clock, PenTool, Search, Bell, Filter, ChevronDown } from "lucide-react"; import { cn } from "@/src/lib/utils"; import { PlatformIcon, MetricCard, PostCard, CalendarWeek, GROWTH_DATA, UPCOMING_POSTS, TOP_PERFORMING } from "@/src/components/CoreLandingPages/AgencyPortfolio/tsx/SOCIALPULSE"; // --- MAIN LAYOUT --- export default function SocialPulseDashboard() { const [activeTab, setActiveTab] = useState("Overview"); const [platformFilter, setPlatformFilter] = useState("all"); const TABS = ["Overview", "Calendar", "Inbox", "Analytics", "Assets"]; return (

{/* Sidebar */}

{[ { id: "Overview", icon: LayoutGrid }, { id: "Calendar", icon: CalendarIcon }, { id: "Inbox", icon: MessageCircle }, { id: "Analytics", icon: BarChart3 }, { id: "Assets", icon: ImageIcon }, ].map((item) => ( ))}

{/* Main Content */}

{/* Header */}

Acme Clothing

{['all', 'instagram', 'tiktok', 'linkedin'].map(p => ( ))}

{/* Dashboard View */}

{/* 1. Metrics Overview */}

{/* 2. Main Feed (Masonry Style) */}

Upcoming Schedule

{UPCOMING_POSTS.map((post) => ( ))}

{/* Chart Section */}

Audience Growth

Instagram

TikTok

{/* 3. Right Sidebar (Top Posts & Calendar) */}

Trending Now

{TOP_PERFORMING.map((post) => (

{post.views} Views

{post.likes} Likes 2h ago

))}

{/* Approvals Widget */}

Approvals

3 posts waiting

Nike "Air Max" campaign drafts need review before 5 PM.

); } // Mini icon component for trend const TrendingUpIcon = () => ( )

Property	Type	Default	Description
primaryColor	string	#1da1f2	Primary social media color (Twitter blue).
pulseColor	string	#ff006e	Color for pulse animations.
pulseSpeed	number	1	Speed of pulse animations (0.5-2).
enableNetwork	boolean	true	Enable network connection visualizations.

Social Pulse

Props