{label}

50%

16 of 32 students

); } type CardProps = { className?: string; description?: string; overline?: string; state?: "Default"; title?: string; }; function Card({ className, description = "32 students · Section A", overline = "MAT 101", state = "Default", title = "Mathematics" }: CardProps) { return (

{overline}

{title}

{description}

Open gradebook

); } type AlertProps = { className?: string; description?: string; title?: string; tone?: "Warning"; }; function Alert({ className, description = "Check the details on this record.", title = "Review before continuing", tone = "Warning" }: AlertProps) { return (

{title}

{description}

); } type AvatarProps = { className?: string; initials?: string; size?: "Default"; }; function Avatar({ className, initials = "MS", size = "Default" }: AvatarProps) { return (

{initials}

); } type TopbarProps = { className?: string; layout?: "Desktop"; subtitle?: string; title?: string; }; function Topbar({ className, layout = "Desktop", subtitle = "Main campus", title = "First Semester · 2026–2027" }: TopbarProps) { return (

{title}

{subtitle}

); } type SidebarProps = { className?: string; layout?: "Expanded"; role?: "Teacher"; }; function Sidebar({ className, layout = "Expanded", role = "Teacher" }: SidebarProps) { return (

School Portal

Teacher workspace

Main campus

Overview

My classes

Gradebooks

Learning materials

Reports

Maria Santos

Teacher

Sign out

); } export default function DesktopTeacher() { return (

Good morning, Ms. Santos

Choose a class to manage scores and learning materials.

View reports

My classes

Mathematics 7 · Grade entry

Open the gradebook to review scores and calculated results.

Review gradebook

); } SUPER CRITICAL: The generated React+Tailwind code MUST be converted to match the target project's technology stack and styling system. 1. Analyze the target codebase to identify: technology stack, styling approach, component patterns, and design tokens 2. Convert React syntax to the target framework/library 3. Transform all Tailwind classes to the target styling system while preserving exact visual design 4. Follow the project's existing patterns and conventions DO NOT install any Tailwind as a dependency unless the user instructs you to do so. Node ids have been added to the code as data attributes, e.g. `data-node-id="1:2"`. These styles are contained in the design: School/Heading 3: Font(family: "Public Sans", style: SemiBold, size: 20, weight: 600, lineHeight: 28, letterSpacing: 0), School/Small Strong: Font(family: "Public Sans", style: SemiBold, size: 14, weight: 600, lineHeight: 20, letterSpacing: 0), School/Small: Font(family: "Public Sans", style: Regular, size: 14, weight: 400, lineHeight: 20, letterSpacing: 0), School/Label: Font(family: "Public Sans", style: Medium, size: 16, weight: 500, lineHeight: 24, letterSpacing: 0), School/Heading 1: Font(family: "Public Sans", style: SemiBold, size: 32, weight: 600, lineHeight: 40, letterSpacing: 0), School/Body: Font(family: "Public Sans", style: Regular, size: 16, weight: 400, lineHeight: 24, letterSpacing: 0), School/Heading 2: Font(family: "Public Sans", style: SemiBold, size: 24, weight: 600, lineHeight: 32, letterSpacing: 0). Component descriptions: The following components have usage descriptions or documentation links defined in Figma. These descriptions provide important context about the intended usage, best practices, and any constraints for each component. Follow these guidelines when implementing or using these components. ## Sidebar **Node ID:** 10:2013 Role-specific navigation patterns. Role visibility illustrates the proposed access model and does not replace server authorization. ## Icon/book-open **Node ID:** 3:8 Lucide book-open outline icon; editable vector source. Use the Icon swap property in UI controls. ## Nav Item **Node ID:** 10:942 Labeled navigation is the default. Collapsed items keep the same 48px targets and icon swap property. ## Icon/layout-dashboard **Node ID:** 3:21 Lucide layout-dashboard outline icon; editable vector source. Use the Icon swap property in UI controls. ## Icon/clipboard-list **Node ID:** 3:63 Lucide clipboard-list outline icon; editable vector source. Use the Icon swap property in UI controls. ## Icon/folder-open **Node ID:** 3:102 Lucide folder-open outline icon; editable vector source. Use the Icon swap property in UI controls. ## Icon/chart-column **Node ID:** 3:129 Lucide chart-column outline icon; editable vector source. Use the Icon swap property in UI controls. ## Avatar **Node ID:** 10:46 Initials-based identity marker. Use a visible person name alongside important record actions. ## Icon/log-out **Node ID:** 3:309 Lucide log-out outline icon; editable vector source. Use the Icon swap property in UI controls. ## Topbar **Node ID:** 10:2732 School context, current period and account controls. Mobile uses a menu trigger and compact context. ## Button **Node ID:** 5:179 Primary actions use 48px controls and a clear verb. Includes text, optional icon swap, focus, disabled and loading states. ## Alert **Node ID:** 11:40 Persistent contextual feedback with a title, explanation and recognizable semantic icon. ## Icon/triangle-alert **Node ID:** 3:238 Lucide triangle-alert outline icon; editable vector source. Use the Icon swap property in UI controls. ## Link **Node ID:** 5:643 Use for navigation to a record or document. Hover and focus retain a visible underline. ## Card **Node ID:** 10:138 Reusable class or summary card with editable heading, supporting information and a clear action. ## Icon Button **Node ID:** 5:592 48px target with an interchangeable icon. Supply an accessible name and a tooltip in the application. ## Icon/ellipsis **Node ID:** 3:286 Lucide ellipsis outline icon; editable vector source. Use the Icon swap property in UI controls. ## Progress **Node ID:** 11:479 A labeled amount completed. Use a numeric value alongside the progress track. ## Material Card **Node ID:** 11:974 A teacher-provided file or link with a title, subject context and a clear open action. ## Icon/file-text **Node ID:** 3:114 Lucide file-text outline icon; editable vector source. Use the Icon swap property in UI controls. ## Badge **Node ID:** 10:15 A semantic status label. Always communicate the status in words as well as color. The generated code contains image and SVG URL constants, e.g. const image = `${assetPathPrefix}/`, where assetPathPrefix is declared once at the top of the code and every asset URL interpolates it. These URLs are temporary download sources and expire after 7 days. Download each asset into the project with curl -L, then replace its URL in the generated code with a reference to the downloaded asset. Never use the temporary URLs as runtime image sources.