root = Card([header, platformFilter, metricsRow, engagementCard, bestPostsCard, audienceCard, scheduleCard, bestTimeCard, commentsCard, earningsCard, collabCard, scheduleForm, footer])
header = CardHeader("Creator Studio", "Cross-platform dashboard for your content")
platformFilter = Card([platformTitle, platformButtons], "clear", "row", "m", "center", "between")
platformTitle = TextContent("Filter by platform", "small-heavy")
platformButtons = Buttons([allBtn, igBtn, ttBtn, ytBtn])
allBtn = Button("All", null, "primary", null, "small")
igBtn = Button("Instagram", null, "secondary", null, "small")
ttBtn = Button("TikTok", null, "secondary", null, "small")
ytBtn = Button("YouTube", null, "secondary", null, "small")
metricsRow = Card([followersCard, engagementCard, earningsCard], "sunk", "row", "m", "stretch", "between")
followersCard = Card([followersTitle, followersValue, followersTrend], "clear", "column", "xs")
followersTitle = TextContent("Followers", "small")
followersValue = TextContent("248,539", "large-heavy")
followersTrend = LineChart(["W1", "W2", "W3", "W4"], [followersSeries], "natural", "Week", "Followers")
followersSeries = Series("Followers", [231000, 238500, 244200, 248539])
engagementCard = Card([engagementTitle, engagementValue, engagementTrend], "clear", "column", "xs")
engagementTitle = TextContent("Engagement rate", "small")
engagementValue = TextContent("6.8%", "large-heavy")
engagementTrend = TextContent("+0.9% vs last month", "small")
earningsCard = Card([earningsTitle, earningsValue, earningsTrend], "clear", "column", "xs")
earningsTitle = TextContent("Earnings this month", "small")
earningsValue = TextContent("$12,480", "large-heavy")
earningsTrend = TextContent("+18% vs last month", "small")
bestPostsCard = Card([bestPostsHeading, bestPostsTable])
bestPostsHeading = Heading("Best posts this month", "h3")
bestPostsTable = Table([postCol, reachCol])
postCol = Col("Post", ["Summer Reel", "Behind the scenes", "Product launch"])
reachCol = Col("Reach", ["412K", "356K", "298K"])
audienceCard = Card([audienceHeading, audienceChart])
audienceHeading = Heading("Audience by platform", "h3")
audienceChart = PieChart(["Instagram", "TikTok", "YouTube"], [45, 35, 20], "donut")
scheduleCard = Card([scheduleHeading, scheduleList])
scheduleHeading = Heading("Scheduled this week", "h3")
scheduleList = ListBlock([sched1, sched2, sched3], "number")
sched1 = ListItem("Monday 9:00 AM", "Reel: Morning routine", null, "Instagram")
sched2 = ListItem("Wednesday 6:00 PM", "TikTok: Tutorial", null, "TikTok")
sched3 = ListItem("Friday 12:00 PM", "YouTube: Vlog", null, "YouTube")
bestTimeCard = Card([bestTimeHeading, bestTimeChart])
bestTimeHeading = Heading("Best hour to post", "h3")
bestTimeChart = BarChart(["6AM", "9AM", "12PM", "3PM", "6PM", "9PM"], [bestTimeSeries], "grouped", "Hour", "Engagement")
bestTimeSeries = Series("Avg engagement", [2.1, 4.8, 5.2, 3.9, 6.8, 5.5])
commentsCard = Card([commentsHeading, commentsList])
commentsHeading = Heading("Comments awaiting reply", "h3")
commentsList = ListBlock([comment1, comment2, comment3])
comment1 = ListItem("@user1", "Love this! When's the next one?", null, "Reply")
comment2 = ListItem("@user2", "Can you do a tutorial on this?", null, "Reply")
comment3 = ListItem("@user3", "Amazing quality as always", null, "Reply")
collabCard = Card([collabHeading, collabList])
collabHeading = Heading("Pending collaboration requests", "h3")
collabList = ListBlock([collab1, collab2], "number")
collab1 = ListItem("Brand X", "Sponsored post - $2,500", null, "Review")
collab2 = ListItem("Agency Y", "Product placement - $1,800", null, "Review")
scheduleForm = Form("schedule-post", formButtons, [captionField, timeField, platformField])
captionField = FormControl("Caption", captionInput, "Write your post caption")
captionInput = TextArea("caption", "Your caption here...", 4)
timeField = FormControl("Date and time", timePicker)
timePicker = DatePicker("schedule_time", "single")
platformField = FormControl("Platform", platformSelect)
platformSelect = Select("platform", [platIg, platTt, platYt], "Choose platform")
platIg = SelectItem("instagram", "Instagram")
platTt = SelectItem("tiktok", "TikTok")
platYt = SelectItem("youtube", "YouTube")
formButtons = Buttons([scheduleBtn, cancelBtn])
scheduleBtn = Button("Schedule post", null, "primary")
cancelBtn = Button("Cancel", null, "tertiary")
footer = FollowUpBlock([followUp1, followUp2])
followUp1 = FollowUpItem("Show me analytics for Instagram only")
followUp2 = FollowUpItem("What's my best content format?")