root = Card([header, filterSection, mainContent, scheduleSection, newDraftBtn], "card", "column", "l")
header = CardHeader("Content Studio", "Manage drafts, publications, and analytics")
filterSection = Card([filterLabel, categoryFilter], "clear", "row", "m", "center")
filterLabel = TextContent("Filter by category:", "small-heavy")
categoryFilter = Select("category_filter", [catAll, catTech, catBusiness, catDesign, catMarketing], "All categories", null, "medium")
catAll = SelectItem("all", "All")
catTech = SelectItem("tech", "Technology")
catBusiness = SelectItem("business", "Business")
catDesign = SelectItem("design", "Design")
catMarketing = SelectItem("marketing", "Marketing")
mainContent = Card([draftsSection, publishedSection, topArticleSection, readershipSection, commentsSection], "clear", "column", "xl")
draftsSection = Card([draftsHeader, draftsTable], "sunk", "column", "m")
draftsHeader = Heading("Drafts", "h3")
draftsTable = Table([draftTitleCol, draftStatusCol, draftUpdatedCol, draftCategoryCol])
draftTitleCol = Col("Title", ["The Future of AI in Healthcare", "Sustainable Supply Chains", "Design Systems at Scale", "Remote Team Culture", "SEO Content Strategy"])
draftStatusCol = Col("Status", ["In Review", "Editing", "Draft", "Approved", "Draft"])
draftUpdatedCol = Col("Last Updated", ["2 hours ago", "Yesterday", "3 days ago", "1 hour ago", "5 days ago"])
draftCategoryCol = Col("Category", ["Technology", "Business", "Design", "Business", "Marketing"])
publishedSection = Card([publishedHeader, publishedList], "sunk", "column", "m")
publishedHeader = Heading("Published This Week", "h3")
publishedList = ListBlock([pub1, pub2, pub3, pub4], "number")
pub1 = ListItem("The Future of AI in Healthcare", "Published Monday • 12.4k views • Technology", null, "View analytics")
pub2 = ListItem("Sustainable Supply Chains", "Published Wednesday • 8.7k views • Business", null, "View analytics")
pub3 = ListItem("Design Systems at Scale", "Published Thursday • 15.2k views • Design", null, "View analytics")
pub4 = ListItem("Remote Team Culture", "Published Friday • 6.3k views • Business", null, "View analytics")
topArticleSection = Card([topArticleHeader, topArticleCard], "sunk", "column", "m")
topArticleHeader = Heading("Most-Read Article This Month", "h3")
topArticleCard = Callout("success", "Design Systems at Scale", "15,200 reads • 4.2 min avg read time • Published 3 days ago • Design category")
readershipSection = Card([readershipHeader, readershipChart], "sunk", "column", "m")
readershipHeader = Heading("Readership (Past 30 Days)", "h3")
readershipChart = AreaChart(readershipLabels, [readershipSeries], "natural", "Date", "Reads")
readershipLabels = ["Day 1", "Day 4", "Day 7", "Day 10", "Day 13", "Day 16", "Day 19", "Day 22", "Day 25", "Day 28", "Day 30"]
readershipSeries = Series("Total Reads", [1200, 1850, 2100, 1950, 2400, 2800, 3100, 2950, 3400, 3800, 4200])
commentsSection = Card([commentsHeader, commentsList], "sunk", "column", "m")
commentsHeader = Heading("Comments Awaiting Reply", "h3")
commentsList = ListBlock([comment1, comment2, comment3], "number")
comment1 = ListItem("Great insights on AI ethics!", "By Sarah Chen • On 'Future of AI' • 2 hours ago", null, "Reply")
comment2 = ListItem("Could you expand on the ROI section?", "By Marcus Johnson • On 'Supply Chains' • 5 hours ago", null, "Reply")
comment3 = ListItem("Love the design token approach", "By Alex Rivera • On 'Design Systems' • 1 day ago", null, "Reply")
scheduleSection = Card([scheduleHeader, scheduleForm], "sunk", "column", "m")
scheduleHeader = Heading("Schedule a Piece", "h3")
scheduleForm = Form("schedule-piece", scheduleButtons, [titleField, dateField, categoryField])
titleField = FormControl("Article Title", titleInput, "Enter the piece title")
titleInput = Input("title", "e.g., The Future of AI in Healthcare", "text", null, "")
dateField = FormControl("Publish Date", datePicker, "Select when to publish")
datePicker = DatePicker("publish_date", "single", null, null)
categoryField = FormControl("Category", categorySelect, "Choose a category")
categorySelect = Select("schedule_category", [schedTech, schedBusiness, schedDesign, schedMarketing], "Select category", null, "medium")
schedTech = SelectItem("tech", "Technology")
schedBusiness = SelectItem("business", "Business")
schedDesign = SelectItem("design", "Design")
schedMarketing = SelectItem("marketing", "Marketing")
scheduleButtons = Buttons([scheduleBtn, cancelScheduleBtn])
scheduleBtn = Button("Schedule", null, "primary")
cancelScheduleBtn = Button("Cancel", null, "tertiary")
newDraftBtn = Buttons([newDraftButton])
newDraftButton = Button("+ Start New Draft", null, "primary", "normal", "large")