root = Card([header, topBar, statsRow, readershipSection, draftsAndSchedule], "card", "column", "l")
header = CardHeader("Content Studio", "Drafts, publishing, and reader engagement")
topBar = Card([filterControl, newDraftButton], "sunk", "row", "m", "center", "between")
filterControl = Card([filterLabel, categorySelect], "clear", "column", "xs")
filterLabel = TextContent("Narrow by category", "small-heavy")
categorySelect = Select("category", [catAll, catNews, catOpinion, catFeature, catCulture], null, null, "all")
catAll = SelectItem("all", "All categories")
catNews = SelectItem("news", "News")
catOpinion = SelectItem("opinion", "Opinion")
catFeature = SelectItem("features", "Features")
catCulture = SelectItem("culture", "Culture")
newDraftButton = Button("New draft", null, "primary")
statsRow = Card([publishedCard, mostReadCard, commentsCard], "clear", "row", "m", "stretch")
publishedCard = Card([pubHeader, pubTable], "sunk", "column", "s")
pubHeader = Card([pubTitleText, pubBadge], "clear", "row", "m", "center", "between")
pubTitleText = Heading("Published this week", "h3")
pubBadge = Badge("3 new", "secondary")
pubTable = Table([pubTitleCol, pubViewsCol])
pubTitleCol = Col("Title", ["Why local journalism matters", "The rise of slow media", "Inside the city budget"])
pubViewsCol = Col("Views", ["12.4k", "9.1k", "7.8k"])
mostReadCard = Card([mrHeader, mrCallout], "sunk", "column", "s")
mrHeader = Card([mrTitleText, mrTrending], "clear", "row", "m", "center", "between")
mrTitleText = Heading("Most-read this month", "h3")
mrTrending = Tag("#1 this month", null, "sm", "success")
mrCallout = Callout("success", "The quiet comeback of print", "48.2k reads · Published Oct 12 · by Dana Cole")
commentsCard = Card([commentsHeader, commentsList], "sunk", "column", "s")
commentsHeader = Card([commentsTitleText, commentsBadge], "clear", "row", "m", "center", "between")
commentsTitleText = Heading("Comments awaiting reply", "h3")
commentsBadge = Badge("4", "destructive")
commentsList = ListBlock([commentOne, commentTwo, commentThree, commentFour], "number")
commentOne = ListItem("Maya R.", "“Any data on gen Z print readers?” · on The quiet comeback of print", null, "Reply")
commentTwo = ListItem("Jonas P.", "“Correction: the 2019 figure was 38%.” · on City budget explained", null, "Reply")
commentThree = ListItem("Priya S.", "“Would love a follow-up on rural access.” · on Why local journalism matters", null, "Reply")
commentFour = ListItem("Tom W.", "“Paywall blocked me — free version?” · on The rise of slow media", null, "Reply")
readershipSection = Card([readershipHeader, readershipChart], "sunk", "column", "m")
readershipHeader = Card([readershipTitle, readershipPeriod], "clear", "row", "m", "center", "between")
readershipTitle = Heading("Readership", "h2")
readershipPeriod = Tag("Last 30 days", null, "sm", "info")
readershipChart = AreaChart(chartLabels, [chartSeries], "natural", "Date", "Readers")
chartLabels = ["Oct 2", "Oct 5", "Oct 8", "Oct 11", "Oct 14", "Oct 17", "Oct 20", "Oct 23", "Oct 26", "Oct 29"]
chartSeries = Series("Readers", [8200, 9100, 8800, 10400, 9900, 12300, 11800, 13500, 12900, 15200])
draftsAndSchedule = Card([draftsCard, scheduleCard], "clear", "row", "m", "stretch")
draftsCard = Card([draftsHeading, draftsTable], "sunk", "column", "s")
draftsHeading = Card([draftsTitle, draftsBadge], "clear", "row", "m", "center", "between")
draftsTitle = Heading("Drafts", "h2")
draftsBadge = Badge("5 total", "secondary")
draftsTable = Table([draftTitleCol, draftCategoryCol, draftStatusCol, draftUpdatedCol])
draftTitleCol = Col("Title", ["The future of local news", "AI in the newsroom", "A field guide to farmers markets", "Remembering the video store", "Behind the paywall boom"])
draftCategoryCol = Col("Category", ["News", "Tech", "Features", "Culture", "Opinion"])
draftStatusCol = Col("Status", ["Draft", "In review", "Scheduled", "Needs edits", "In review"])
draftUpdatedCol = Col("Updated", ["2h ago", "Yesterday", "Yesterday", "3d ago", "4d ago"])
scheduleCard = Card([scheduleHeading, scheduleForm], "sunk", "column", "s")
scheduleHeading = Heading("Schedule a piece", "h2")
scheduleForm = Form("schedule-piece", scheduleButtons, [schedTitleField, schedCategoryField, schedDateField])
scheduleButtons = Buttons([scheduleSubmitBtn, scheduleCancelBtn])
scheduleSubmitBtn = Button("Schedule", null, "primary")
scheduleCancelBtn = Button("Cancel", null, "tertiary")
schedTitleField = FormControl("Title", schedTitleInput, "Working title for the piece")
schedTitleInput = Input("title", "e.g. The state of local news")
schedCategoryField = FormControl("Category", schedCategorySelect)
schedCategorySelect = Select("category", [schedCatNews, schedCatOpinion, schedCatFeature], "Pick a category")
schedCatNews = SelectItem("news", "News")
schedCatOpinion = SelectItem("opinion", "Opinion")
schedCatFeature = SelectItem("features", "Features")
schedDateField = FormControl("Publish date", schedDatePicker, "Choose a date for publication")
schedDatePicker = DatePicker("publish_date", "single")