root = Card([header, categoryFilter, draftsSection, publishedSection, topArticleSection, readershipSection, commentsSection, scheduleSection, newDraftBtn], "card", "column", "l")
header = CardHeader("Content Studio", "Manage drafts, published pieces, and audience insights")
categoryFilter = Form("category-filter", filterButtons, [categoryField])
categoryField = FormControl("Filter by category", categorySelect, "Narrow the lists below")
categorySelect = Select("category", categoryOptions, "All categories", null, "medium")
categoryOptions = [optAll, optTech, optDesign, optBusiness, optMarketing, optProduct]
optAll = SelectItem("all", "All categories")
optTech = SelectItem("tech", "Technology")
optDesign = SelectItem("design", "Design")
optBusiness = SelectItem("business", "Business")
optMarketing = SelectItem("marketing", "Marketing")
optProduct = SelectItem("product", "Product")
filterButtons = Buttons([filterApplyBtn])
filterApplyBtn = Button("Apply", null, "primary")
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 Design", "Building Scalable Design Systems", "Remote Work Culture Guide", "TypeScript Best Practices 2024", "Accessibility Audit Checklist"])
draftStatusCol = Col("Status", ["In Review", "Editing", "Needs Revision", "Ready to Schedule", "In Progress"])
draftUpdatedCol = Col("Last Updated", ["2 hours ago", "1 day ago", "3 days ago", "5 hours ago", "4 days ago"])
draftCategoryCol = Col("Category", ["Design", "Design", "Business", "Tech", "Tech"])
publishedSection = Card([publishedHeader, publishedList], "sunk", "column", "m")
publishedHeader = Heading("Published This Week", "h3")
publishedList = ListBlock([pubItem1, pubItem2, pubItem3, pubItem4, pubItem5], "number")
pubItem1 = ListItem("Launching Our New API v2", "Tech · 12,450 views · Published Monday", null, "View analytics")
pubItem2 = ListItem("Design Tokens: A Complete Guide", "Design · 8,920 views · Published Tuesday", null, "View analytics")
pubItem3 = ListItem("Quarterly Business Review Q1", "Business · 5,670 views · Published Wednesday", null, "View analytics")
pubItem4 = ListItem("SEO Content Strategy for 2024", "Marketing · 4,310 views · Published Thursday", null, "View analytics")
pubItem5 = ListItem("Product Launch: Mobile App 3.0", "Product · 3,890 views · Published Friday", null, "View analytics")
topArticleSection = Card([topArticleHeader, topArticleCard], "sunk", "column", "m")
topArticleHeader = Heading("Most-Read Article This Month", "h3")
topArticleCard = Callout("success", "The Future of AI in Design", "45,200 reads · 2,100 shares · 8 min read · Published March 3rd · Category: Design")
readershipSection = Card([readershipHeader, readershipChart], "sunk", "column", "m")
readershipHeader = Heading("Readership (Last 30 Days)", "h3")
readershipChart = AreaChart(readershipLabels, [readershipSeries], "natural", "Date", "Readers")
readershipLabels = ["Mar 1", "Mar 3", "Mar 5", "Mar 7", "Mar 9", "Mar 11", "Mar 13", "Mar 15", "Mar 17", "Mar 19", "Mar 21", "Mar 23", "Mar 25", "Mar 27", "Mar 29", "Mar 31"]
readershipSeries = Series("Daily Readers", [1200, 1450, 1380, 1620, 1550, 1780, 1920, 2100, 2050, 2340, 2280, 2560, 2480, 2720, 2650, 2890])
commentsSection = Card([commentsHeader, commentsTable], "sunk", "column", "m")
commentsHeader = Heading("Comments Awaiting Reply", "h3")
commentsTable = Table([commentAuthorCol, commentArticleCol, commentTextCol, commentDateCol])
commentAuthorCol = Col("Author", ["Sarah Chen", "Marcus Johnson", "Emily Davis", "James Wilson", "Lisa Park"])
commentArticleCol = Col("Article", ["AI in Design", "Design Systems", "Remote Work", "TypeScript Guide", "Accessibility"])
commentTextCol = Col("Comment", ["Great insights! Could you elaborate on the ethical considerations?", "This saved our team weeks of work. Thank you!", "How does this apply to hybrid teams?", "Any plans for a follow-up on advanced types?", "Missing WCAG 2.2 criteria in the checklist."])
commentDateCol = Col("Date", ["2 hours ago", "4 hours ago", "1 day ago", "1 day ago", "2 days ago"])
scheduleSection = Card([scheduleHeader, scheduleForm], "sunk", "column", "m")
scheduleHeader = Heading("Schedule a Piece", "h3")
scheduleForm = Form("schedule-piece", scheduleButtons, [scheduleTitleField, scheduleDateField, scheduleCategoryField])
scheduleTitleField = FormControl("Article Title", scheduleTitleInput, "Enter the title of the piece to schedule")
scheduleTitleInput = Input("schedule_title", "e.g., The Future of AI in Design", "text", null, "")
scheduleDateField = FormControl("Publish Date & Time", scheduleDatePicker, "Select when to publish")
scheduleDatePicker = DatePicker("schedule_date", "single", null, null)
scheduleCategoryField = FormControl("Category", scheduleCategorySelect, "Choose a category for this piece")
scheduleCategorySelect = Select("schedule_category", scheduleCategoryOptions, "Select category", null, "medium")
scheduleCategoryOptions = [schedOptTech, schedOptDesign, schedOptBusiness, schedOptMarketing, schedOptProduct]
schedOptTech = SelectItem("tech", "Technology")
schedOptDesign = SelectItem("design", "Design")
schedOptBusiness = SelectItem("business", "Business")
schedOptMarketing = SelectItem("marketing", "Marketing")
schedOptProduct = SelectItem("product", "Product")
scheduleButtons = Buttons([scheduleSubmitBtn, scheduleCancelBtn])
scheduleSubmitBtn = Button("Schedule", null, "primary")
scheduleCancelBtn = Button("Cancel", null, "tertiary")
newDraftBtn = Button("Start New Draft", null, "primary")