root = Card([header, filterForm, metricsHeading, metricsTable, bestPostsHeading, bestPostsTable, audienceHeading, audienceChart, scheduledHeading, scheduledList, bestHourHeading, bestHourCallout, bestHourChart, commentsHeading, commentsAlert, commentsList, collabHeading, collabList, scheduleHeading, scheduleForm], "card", "column", "l")
header = CardHeader("Creator Studio", "Cross-platform overview")
filterForm = Form("platform-filter", filterButtons, [platformField])
platformField = FormControl("Platform", platformSelect, "Filters every metric on this screen")
platformSelect = Select("platform", [platformAll, platformIG, platformTikTok, platformYT, platformX])
platformAll = SelectItem("all", "All platforms")
platformIG = SelectItem("instagram", "Instagram")
platformTikTok = SelectItem("tiktok", "TikTok")
platformYT = SelectItem("youtube", "YouTube")
platformX = SelectItem("x", "X")
filterButtons = Buttons([applyFilterBtn])
applyFilterBtn = Button("Apply filter", null, "secondary")
metricsHeading = Heading("Key metrics", "h2")
metricsTable = Table([metricCol, valueCol, changeCol])
metricCol = Col("Metric", ["Total Followers", "Engagement Rate", "Earnings (This Month)"])
valueCol = Col("Value", ["1,284,500", "4.8%", "$12,480"])
changeCol = Col("Change", ["+3.2% (30d)", "+0.4 pts", "+18.0% (30d)"])
bestPostsHeading = Heading("Best posts this month", "h2")
bestPostsTable = Table([postCol, platformCol, reachCol])
postCol = Col("Post", ["Spring makeup tutorial", "Behind the scenes: studio tour", "Q&A: 5 mistakes to avoid", "Morning routine vlog"])
platformCol = Col("Platform", ["Instagram", "TikTok", "YouTube", "X"])
reachCol = Col("Reach", ["248K", "186K", "142K", "98K"])
audienceHeading = Heading("Audience by platform", "h2")
audienceChart = PieChart(["Instagram", "TikTok", "YouTube", "X"], [42, 31, 18, 9], "donut")
scheduledHeading = Heading("Scheduled this week", "h2")
scheduledList = ListBlock([sched1, sched2, sched3, sched4], "number")
sched1 = ListItem("Reel: 3 editing tricks", "Tue 9:00 AM · Instagram")
sched2 = ListItem("Short: Day in my life", "Wed 5:00 PM · TikTok")
sched3 = ListItem("Video: Office tour", "Thu 2:00 PM · YouTube")
sched4 = ListItem("Thread: Weekly recap", "Fri 11:00 AM · X")
bestHourHeading = Heading("Best hour to post", "h2")
bestHourCallout = Callout("success", "Best time: 6:00 PM", "Based on engagement history this month")
bestHourChart = BarChart(["6 AM", "9 AM", "12 PM", "3 PM", "6 PM", "9 PM"], [hourSeries], "grouped", "Time of day", "Engagement rate (%)")
hourSeries = Series("Avg engagement", [2.1, 3.4, 4.2, 3.9, 5.6, 4.7])
commentsHeading = Heading("Comments waiting for a reply", "h2")
commentsAlert = Alert("5 comments need replies", "3 on Instagram, 2 on YouTube — oldest is from 2 days ago", "warning")
commentsList = ListBlock([comment1, comment2, comment3, comment4])
comment1 = ListItem("@beautybyjen", "This lighting setup is everything — tutorial please? · Instagram · 2d")
comment2 = ListItem("@techwithtom", "Does this work with the M2 MacBook Air? · YouTube · 1d")
comment3 = ListItem("@dailygrind", "Drop the full gear list! 🙏 · Instagram · 5h")
comment4 = ListItem("@runsandreads", "Can you make a part 2? · YouTube · 3h")
collabHeading = Heading("Pending collaboration requests", "h2")
collabList = ListBlock([collab1, collab2, collab3])
collab1 = ListItem("Glimmer Cosmetics", "$1,800 · 1 Reel + 1 Story · Respond by Fri")
collab2 = ListItem("Peak Audio", "$2,400 · 1 YouTube video · Respond by Mon")
collab3 = ListItem("UrbanFit", "$950 · 2 TikTok posts · Respond by Wed")
scheduleHeading = Heading("Schedule a post", "h2")
scheduleForm = Form("schedule-post", scheduleButtons, [captionField, platformField2, dateField, timeField])
captionField = FormControl("Caption", captionInput, "Write the caption for your post")
captionInput = TextArea("caption", "Launch day is almost here 🚀…", 4)
platformField2 = FormControl("Platform", schedPlatformSelect)
schedPlatformSelect = Select("post_platform", [platformIG, platformTikTok, platformYT, platformX], "Choose platform")
dateField = FormControl("Date", postDate)
postDate = DatePicker("post_date", "single")
timeField = FormControl("Time", timeSelect, "Suggested: 6:00 PM")
timeSelect = Select("post_time", [time9, time12, time3, time6, time9pm], "Choose a time")
time9 = SelectItem("9am", "9:00 AM")
time12 = SelectItem("12pm", "12:00 PM")
time3 = SelectItem("3pm", "3:00 PM")
time6 = SelectItem("6pm", "6:00 PM")
time9pm = SelectItem("9pm", "9:00 PM")
scheduleButtons = Buttons([scheduleBtn, draftBtn])
scheduleBtn = Button("Schedule Post", null, "primary")
draftBtn = Button("Save as draft", null, "tertiary")