Component documentation
SGUI / Development
One owner for card pagination and loading/empty content.
Loading examples…
Loading examples…
Loading examples…
No direct parents in the documented component catalog.
Host-owned course summary
Host-owned course summary
Host-owned course summary
Host-owned course summary
Host-owned course summary
Host-owned course summary
'use client';
import { useState } from 'react';
import { CardCollectionWithFooter, CourseCardFrame } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function CardCollectionExample() {
const [page,setPage] = useState(0);
const [size,setSize] = useState(3);
return (
<>
<CardCollectionWithFooter rows={[{"id":"1","name":"Course 1"},{"id":"2","name":"Course 2"},{"id":"3","name":"Course 3"},{"id":"4","name":"Course 4"},{"id":"5","name":"Course 5"},{"id":"6","name":"Course 6"},{"id":"7","name":"Course 7"},{"id":"8","name":"Course 8"},{"id":"9","name":"Course 9"},{"id":"10","name":"Course 10"},{"id":"11","name":"Course 11"},{"id":"12","name":"Course 12"}]} getRowId={row=>row.id} page={page} pageSize={size} pageSizeOptions={[3,6,12]} onPaginationModelChange={model => { setPage(model.page); setSize(model.pageSize); }} loading={false} renderCard={row=><CourseCardFrame header={<Typography as="h3" variant="h5">{row.name}</Typography>} body={<Typography>Host-owned course summary</Typography>} />} />
</>
);
}
Create your first course to get started.
'use client';
import { useState } from 'react';
import { CardCollectionWithFooter, CourseCardFrame } from '@structured-growth/sg-ui/components';
import { Stack, Typography, Link } from '@structured-growth/sg-ui/primitives';
export default function EmptyCardsExample() {
const [page,setPage] = useState(0);
const [size,setSize] = useState(3);
return (
<>
<CardCollectionWithFooter rows={[]} getRowId={(row: {id:string})=>row.id} page={0} pageSize={3} pageSizeOptions={[3]} onPaginationModelChange={model => { setPage(model.page); setSize(model.pageSize); }} renderCard={row=><Typography>{row.id}</Typography>} emptyContent={<Typography>Create your first course to get started.</Typography>} />
</>
);
}