Component documentation
SGUI / Development
Progress, deadlines and host continuation callbacks.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Morgan Reed
Up Next: Practice exercise
Due Oct 20 (6 days)
Continue requests: 0
Morgan Reed
Up Next: Practice exercise
Due Oct 20 (6 days)
Continue requests: 0
'use client';
import { useState } from 'react';
import { LearnerCourseCard } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function LearnerCardExample() {
const [continued,setContinued] = useState(0);
return (
<>
<Stack gap={3}><LearnerCourseCard courseName={"Course basics"} instructorName="Morgan Reed" progressPercent={35} nextActivity="Practice exercise" dueAt="2026-10-20T12:00:00Z" referenceNow={new Date("2026-10-14T12:00:00Z")} detailsHref="#main-content" onContinue={() => setContinued(value=>value+1)} /><Typography>Continue requests: {continued}</Typography></Stack>
</>
);
}
Morgan Reed
Up Next: Practice exercise
Due Oct 20 (6 days)
Morgan Reed
Up Next: Practice exercise
Due Oct 20 (6 days)
Morgan Reed
Up Next: Practice exercise
Due Oct 20 (6 days)
'use client';
import { useState } from 'react';
import { LearnerCourseCard } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function LearnerProgressExample() {
const [continued,setContinued] = useState(0);
return (
<>
<Stack direction="row" wrap gap={3}><LearnerCourseCard courseName={"Course basics"} instructorName="Morgan Reed" progressPercent={0} nextActivity="Practice exercise" dueAt="2026-10-20T12:00:00Z" referenceNow={new Date("2026-10-14T12:00:00Z")} detailsHref="#main-content" onContinue={() => setContinued(value=>value+1)} />
<LearnerCourseCard courseName={"Course basics"} instructorName="Morgan Reed" progressPercent={50} nextActivity="Practice exercise" dueAt="2026-10-20T12:00:00Z" referenceNow={new Date("2026-10-14T12:00:00Z")} detailsHref="#main-content" onContinue={() => setContinued(value=>value+1)} />
<LearnerCourseCard courseName={"Course basics"} instructorName="Morgan Reed" progressPercent={100} nextActivity="Practice exercise" dueAt="2026-10-20T12:00:00Z" referenceNow={new Date("2026-10-14T12:00:00Z")} detailsHref="#main-content" onContinue={() => setContinued(value=>value+1)} /></Stack>
</>
);
}
A fixed host reference clock keeps overdue, today, tomorrow and later states reproducible. The host locale formats the date/time in its browser timezone. The current dueAt contract requires a string or Date; an empty host string demonstrates the unavailable-date fallback, not an invented optional prop. The last card also shows missing supporting strings.
Morgan Reed
Up Next: Reflect on the previous lesson
Due Oct 13 at 6:00 PM
Morgan Reed
Up Next: Complete the practice activity
Due today in 6 hours
Morgan Reed
Up Next: Review the next lesson
Due tomorrow at 6:00 PM
Morgan Reed
Up Next: Build a plan for the week
Due Oct 20 (7 days)
Up Next:
Due date unavailable
'use client';
import { useState } from 'react';
import {LearnerCourseCard} from '@structured-growth/sg-ui/components';
import {Stack,Typography} from '@structured-growth/sg-ui/primitives';
export default function LearnerDueDatesExample() {
const [result,setResult]=useState("");
return (
<>
<Stack gap={3}>
<Stack direction="row" wrap gap={3}>
{[{"id":"overdue","courseName":"An overdue introduction to assessment and practical course design","dueAt":"2026-10-13T18:00:00Z","instructorName":"Morgan Reed","nextActivity":"Reflect on the previous lesson"},{"id":"today","courseName":"Due today","dueAt":"2026-10-14T18:00:00Z","instructorName":"Morgan Reed","nextActivity":"Complete the practice activity"},{"id":"tomorrow","courseName":"Due tomorrow","dueAt":"2026-10-15T18:00:00Z","instructorName":"Morgan Reed","nextActivity":"Review the next lesson"},{"id":"later","courseName":"A later deadline","dueAt":"2026-10-20T18:00:00Z","instructorName":"Morgan Reed","nextActivity":"Build a plan for the week"},{"id":"missing","courseName":"No deadline or supporting content supplied","dueAt":"","instructorName":"","nextActivity":""}].map(({id,...course})=><LearnerCourseCard key={id} {...course} progressPercent={35} referenceNow={new Date('2026-10-14T12:00:00Z')} detailsHref="#course-details" onContinue={()=>setResult('Continue requested for '+course.courseName+'. Host owns navigation.')} />)}
</Stack>
<Typography role="status">{result}</Typography>
</Stack>
</>
);
}