Skip to contentVibraUI
Dashboards

Academy vocabulary

The Academy dashboard's words: what a course's category and level and a student's status are called, the tone each status wears, and the href of a course's page.

One module every Academy page prints its words from, so "Web development" is retuned in one place. Plain constants and one link helper: the store's types it reads are erased, so a client island and a server file can both import it without the store coming along.

Install

npx shadcn@latest add @vibra/vocabulary-academy

Needs the @vibra registry in your components.json — set it up once.

Props

PropTypeDefaultDescription
CATEGORY_LABELS / LEVEL_LABELSRecord<Course["category"], string> / Record<Course["level"], string>—A course's category and level as every page prints them, in the catalogue's order.
STUDENT_STATUS_LABELS / STUDENT_STATUS_MAPRecord<Student["status"], string> / Record<string, StatusVariant>—Active, Paused and Graduated, and the tone a graduate wears on a StatusBadge.
courseHref(id: string) => string—The course page's route with the id in it: /academy/courses/crs_0006.

Dependencies

Source

lib/dashboards/academy/vocabulary.ts
import { ROUTES } from "@/lib/dashboards/academy/nav"
import { type Course, type Student } from "@/lib/sample-data"
import { type StatusVariant } from "@/components/ui/status-badge"

/**
 * The Academy dashboard's words: what a course's category and level and a
 * student's status are called on every page, the tone each status wears, and
 * where a course's own page is. One module the pages share, so "Web
 * development" is retuned in one place. Plain constants with no rows behind
 * them — the store's types above are erased — so a client island and a
 * server file can both import it without the store coming along.
 */

/** A course's category as the catalogue prints it, in the catalogue's order. */
export const CATEGORY_LABELS: Record<Course["category"], string> = {
  Web: "Web development",
  Backend: "Backend",
  Design: "Design",
  Data: "Data",
  Product: "Product",
}

/** A course's level, easiest first. */
export const LEVEL_LABELS: Record<Course["level"], string> = {
  intro: "Intro",
  intermediate: "Intermediate",
  advanced: "Advanced",
}

/** Where a student stands, in the order a roster is read. */
export const STUDENT_STATUS_LABELS: Record<Student["status"], string> = {
  active: "Active",
  paused: "Paused",
  graduated: "Graduated",
}

/** Active and paused are StatusBadge defaults; a graduate reads as news, not a warning. */
export const STUDENT_STATUS_MAP: Record<string, StatusVariant> = { graduated: "info" }

/** `/academy/courses/crs_0006`: the course page's route with the id in it. */
export function courseHref(id: string): string {
  return ROUTES.course.replace("[id]", id)
}