4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T1974,import { useMemo, useState } from 'react' import { Button } from '../Button' import { BottomNav, type NavItem } from '../BottomNav' import { NavLink } from '../NavLink' import { Blob, Badge } from '../media' import { Grid, Row, Shell, Sidebar, Stack } from '../layout' import { Progress } from '../progress' import { Card, RowCard } from '../surface' import { Eyebrow, Heading, Text } from '../text' const NAV: NavItem[] = [ { href: '/', label: 'Home', icon: 'home', tone: 'purple' }, { href: '/learn', label: 'Learn', icon: 'wand', tone: 'yellow' }, { href: '/practice', label: 'Practice', icon: 'target', tone: 'mint' }, { href: '/community', label: 'Community', icon: 'users', tone: 'pink' }, { href: '/profile', label: 'Profile', icon: 'user', tone: 'blue' }, ] const HERE = '/learn' interface Lesson { id: string title: string duration: number kind: 'Lesson' | 'Exercise' | 'Quiz' } const LESSONS: Lesson[] = [ { id: 'hierarchy', title: 'Build a clear visual hierarchy', duration: 8, kind: 'Lesson' }, { id: 'spacing', title: 'Use spacing as a system', duration: 12, kind: 'Exercise' }, { id: 'contrast', title: 'Make contrast do real work', duration: 7, kind: 'Lesson' }, { id: 'review', title: 'Review a dashboard', duration: 10, kind: 'Quiz' }, ] const MINUTES = new Intl.NumberFormat('en-US', { style: 'unit', unit: 'minute' }) /** A responsive learning dashboard with a meaningful course outline, progress * that updates as lessons are completed, and a focused current-lesson panel. */ export function CourseBlock() { const [completed, setCompleted] = useState(['hierarchy']) const [activeId, setActiveId] = useState('spacing') const active = LESSONS.find((lesson) => lesson.id === activeId) ?? LESSONS[0]! const progress = Math.round((completed.length / LESSONS.length) * 100) const remaining = useMemo( () => LESSONS.filter((lesson) => !completed.includes(lesson.id)).reduce((sum, lesson) => sum + lesson.duration, 0), [completed], ) function toggleLesson(id: string, checked: boolean | 'indeterminate') { setCompleted((current) => checked === true ? current.includes(id) ? current : [...current, id] : current.filter((lessonId) => lessonId !== id), ) } function completeActive() { toggleLesson(active.id, true) const next = LESSONS.find((lesson) => !completed.includes(lesson.id) && lesson.id !== active.id) if (next) setActiveId(next.id) } return ( <> Small Steps {NAV.map((item) => ( {item.label} ))} Design Foundations Learn by Doing A compact course with progress you can actually complete. Course 2 of 4 Current Course Designing Interfaces That Read Clearly Turn hierarchy, spacing, and contrast into repeatable decisions. {progress}% complete {MINUTES.format(remaining)} remaining

{LESSONS.map((lesson, index) => ( setActiveId(lesson.id)} > {lesson.kind} · {MINUTES.format(lesson.duration)} {lesson.title} {completed.includes(lesson.id) ? 'Done' : 'Next'} ))} {active.kind} {active.title} Work through a focused example, then apply the idea to a real interface. Time {MINUTES.format(active.duration)} ) } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L4e",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/bottom-nav.json","https://1st-pouf.worksonmy.dev/r/button.json","https://1st-pouf.worksonmy.dev/r/layout.json","https://1st-pouf.worksonmy.dev/r/media.json","https://1st-pouf.worksonmy.dev/r/nav-link.json","https://1st-pouf.worksonmy.dev/r/progress.json","https://1st-pouf.worksonmy.dev/r/surface.json","https://1st-pouf.worksonmy.dev/r/text.json"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/pouf/blocks/course.tsx","content":"$50","type":"registry:block","target":"components/pouf/blocks/course.tsx"}],"className":"h-[70svh] min-h-80"}]]}]