root = Card([header, platformFilter, overview, engagement, bestPosts, audienceSplit, schedule, bestHour, comments, earnings, collabs, scheduleForm])
header = CardHeader("Creator Studio", "Cross-platform dashboard")
platformFilter = Form("platform-filter", filterButtons, [platformField])
platformField = FormControl("Platform", platformSelect)
platformSelect = Select("platform", [allOpt, igOpt, ytOpt, ttOpt, xOpt], "All platforms")
allOpt = SelectItem("all", "All platforms")
igOpt = SelectItem("ig", "Instagram")
ytOpt = SelectItem("yt", "YouTube")
ttOpt = SelectItem("tt", "TikTok")
xOpt = SelectItem("x", "X (Twitter)")
filterButtons = Buttons([applyBtn])
applyBtn = Button("Apply filter", null, "primary")
overview = Card([overviewHeading, overviewKpis], "sunk")
overviewHeading = Heading("Overview", "h2")
overviewKpis = Table([metricName, metricValue])
metricName = Col("Metric", ["Total followers", "Growth (30d)", "Engagement rate", "Earnings (this month)"])
metricValue = Col("Value", ["1,284,500", "+12.4%", "5.8%", "$18,420"])
engagement = Card([engagementHeading, engagementChart], "sunk")
engagementHeading = Heading("Engagement rate by platform", "h3")
engagementChart = HorizontalBarChart(["Instagram", "YouTube", "TikTok", "X"], [engagementSeries], "grouped", "Rate (%)", "Platform")
engagementSeries = Series("Engagement rate", [6.2, 4.1, 7.5, 3.8])
bestPosts = Card([bestHeading, bestTable], "sunk")
bestHeading = Heading("Best posts this month", "h3")
bestTable = Table([postTitle, postPlatform, postReach])
postTitle = Col("Post", ["Summer vlog recap", "Behind the scenes reel", "Q&A live clip", "Tutorial thread"])
postPlatform = Col("Platform", ["YouTube", "Instagram", "TikTok", "X"])
postReach = Col("Reach", ["1.2M", "890K", "1.5M", "640K"])
audienceSplit = Card([audienceHeading, audienceChart, audienceTable], "sunk")
audienceHeading = Heading("Audience split by platform", "h3")
audienceChart = PieChart(["Instagram", "YouTube", "TikTok", "X"], [42, 28, 22, 8], "donut")
audienceTable = Table([platformName, platformShare])
platformName = Col("Platform", ["Instagram", "YouTube", "TikTok", "X"])
platformShare = Col("Share", ["42%", "28%", "22%", "8%"])
schedule = Card([scheduleHeading, scheduleList], "sunk")
scheduleHeading = Heading("Posts scheduled this week", "h3")
scheduleList = ListBlock([scheduleItem1, scheduleItem2, scheduleItem3, scheduleItem4], "number")
scheduleItem1 = ListItem("Tue 10:00 AM", "Instagram — Reel: '5 editing tricks'")
scheduleItem2 = ListItem("Wed 4:00 PM", "TikTok — Short: 'Studio tour'")
scheduleItem3 = ListItem("Fri 12:00 PM", "YouTube — Video: 'Monthly Q&A'")
scheduleItem4 = ListItem("Sun 6:00 PM", "X — Thread: 'Week recap'")
bestHour = Card([bestHourHeading, bestHourChart], "sunk")
bestHourHeading = Heading("Best hour to post (based on 6 months)", "h3")
bestHourChart = BarChart(["12AM", "4AM", "8AM", "12PM", "4PM", "8PM", "11PM"], [bestHourSeries], "grouped", "Hour", "Avg engagement")
bestHourSeries = Series("Avg engagement", [1200, 600, 1800, 2500, 3200, 4100, 2100])
comments = Card([commentsHeading, commentsCallout, commentsList], "sunk")
commentsHeading = Heading("Comments waiting for a reply", "h3")
commentsCallout = Callout("warning", "3 comments need your reply", "Respond quickly to keep engagement high")
commentsList = ListBlock([commentItem1, commentItem2, commentItem3], "number")
commentItem1 = ListItem("@maya_creates", "Love the new setup! Can you share the gear list?")
commentItem2 = ListItem("@dev_watcher", "When is the next tutorial dropping?")
commentItem3 = ListItem("@studiofan", "The lighting in the last video was perfect!")
earnings = Card([earningsHeading, earningsChart], "sunk")
earningsHeading = Heading("Earnings this month", "h3")
earningsChart = AreaChart(["W1", "W2", "W3", "W4"], [earningsSeries], "linear", "Week", "USD")
earningsSeries = Series("Earnings", [3200, 4800, 5200, 5220])
collabs = Card([collabsHeading, collabsCallout, collabsList], "sunk")
collabsHeading = Heading("Pending collaboration requests", "h3")
collabsCallout = Callout("info", "2 collaboration requests awaiting review", "Review and respond when ready")
collabsList = ListBlock([collabItem1, collabItem2], "number")
collabItem1 = ListItem("Brand A", "Sponsored video — $3,000 offer")
collabItem2 = ListItem("Brand B", "Product placement — $1,500 offer")
scheduleForm = Card([scheduleFormHeading, scheduleFields], "sunk")
scheduleFormHeading = Heading("Schedule a new post", "h3")
scheduleFields = Form("schedule-post", scheduleButtons, [captionField, platformField2, dateField])
captionField = FormControl("Caption", captionInput, "Write your post caption")
captionInput = TextArea("caption", "Enter caption here...", 4)
platformField2 = FormControl("Platform", platformSelect2)
platformSelect2 = Select("platform2", [igOpt2, ytOpt2, ttOpt2, xOpt2], "Choose platform")
igOpt2 = SelectItem("ig", "Instagram")
ytOpt2 = SelectItem("yt", "YouTube")
ttOpt2 = SelectItem("tt", "TikTok")
xOpt2 = SelectItem("x", "X (Twitter)")
dateField = FormControl("Schedule time", dateInput)
dateInput = DatePicker("schedule_time", "single")
scheduleButtons = Buttons([scheduleBtn, cancelBtn])
scheduleBtn = Button("Schedule post", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")