Component documentation
Building a thoughtful learning experience
Controlled panels with automatic or manual keyboard activation.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppPageTabs } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function AppPageTabsExample() {
const [value,setValue] = useState("overview");
return (
<>
<ThemeScope density="comfortable">
<AppPageTabs value={value} onChange={setValue} density="comfortable" activation={"automatic"} label="Course sections" items={[{id:'overview',label:'Overview',content:<Typography>{"Building a thoughtful learning experience"}</Typography>},{id:'practice',label:'Practice',content:<Typography>Practice tasks for the course.</Typography>},{id:'reflection',label:'Reflection',disabled:false,content:<Typography>Reflect on your progress.</Typography>}]} />
</ThemeScope>
</>
);
}
Controlled panels with automatic or manual keyboard activation.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppPageTabs } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function AppPageTabsExample() {
const [value,setValue] = useState("overview");
return (
<>
<ThemeScope density="compact">
<AppPageTabs value={value} onChange={setValue} density="compact" activation={"automatic"} label="Course sections" items={[{id:'overview',label:'Overview',content:<Typography>{"Building a thoughtful learning experience"}</Typography>},{id:'practice',label:'Practice',content:<Typography>Practice tasks for the course.</Typography>},{id:'reflection',label:'Reflection',disabled:false,content:<Typography>Reflect on your progress.</Typography>}]} />
</ThemeScope>
</>
);
}
Controlled panels with automatic or manual keyboard activation.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppPageTabs } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function AppPageTabsExample() {
const [value,setValue] = useState("overview");
return (
<>
<ThemeScope density="comfortable">
<AppPageTabs value={value} onChange={setValue} density="comfortable" activation={"automatic"} label="Course sections" items={[{id:'overview',label:'Overview',content:<Typography>{"Building a thoughtful learning experience"}</Typography>},{id:'practice',label:'Practice',content:<Typography>Practice tasks for the course.</Typography>},{id:'reflection',label:'Reflection',disabled:false,content:<Typography>Reflect on your progress.</Typography>}]} />
</ThemeScope>
</>
);
}
Controlled panels with automatic or manual keyboard activation.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppPageTabs } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function AppPageTabsExample() {
const [value,setValue] = useState("overview");
return (
<>
<ThemeScope density="compact">
<AppPageTabs value={value} onChange={setValue} density="compact" activation={"manual"} label="Course sections" items={[{id:'overview',label:'Overview',content:<Typography>{"Building a thoughtful learning experience"}</Typography>},{id:'practice',label:'Practice',content:<Typography>Practice tasks for the course.</Typography>},{id:'reflection',label:'Reflection',disabled:false,content:<Typography>Reflect on your progress.</Typography>}]} />
</ThemeScope>
</>
);
}
Controlled panels with automatic or manual keyboard activation.
Building a thoughtful learning experience
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppPageTabs } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
export default function AppPageTabsExample() {
const [value,setValue] = useState("overview");
return (
<>
<ThemeScope density="comfortable">
<AppPageTabs value={value} onChange={setValue} density="comfortable" activation={"manual"} label="Course sections" items={[{id:'overview',label:'Overview',content:<Typography>{"Building a thoughtful learning experience"}</Typography>},{id:'practice',label:'Practice',content:<Typography>Practice tasks for the course.</Typography>},{id:'reflection',label:'Reflection',disabled:false,content:<Typography>Reflect on your progress.</Typography>}]} />
</ThemeScope>
</>
);
}
Controlled panels with automatic or manual keyboard activation.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppPageTabs } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { SGNavigationProvider } from '@structured-growth/sg-ui';
export default function AppPageTabsExample() {
const [value,setValue] = useState("/courses/overview");
return (
<>
<ThemeScope density="compact">
<SGNavigationProvider value={{pathname:value,navigate:setValue}}><Stack gap={3}><AppPageTabs value={value} items={[{"id":"/courses/overview","label":"Overview","href":"/courses/overview"},{"id":"/courses/practice","label":"Practice","href":"/courses/practice"},{"id":"/courses/reflection","label":"Reflection","href":"/courses/reflection","disabled":false}]} density="compact" label="Course routes"/></Stack></SGNavigationProvider>
</ThemeScope>
</>
);
}
Controlled panels with automatic or manual keyboard activation.
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import { AppPageTabs } from '@structured-growth/sg-ui/components';
import { Stack, Typography } from '@structured-growth/sg-ui/primitives';
import { SGNavigationProvider } from '@structured-growth/sg-ui';
export default function AppPageTabsExample() {
const [value,setValue] = useState("/courses/overview");
return (
<>
<ThemeScope density="comfortable">
<SGNavigationProvider value={{pathname:value,navigate:setValue}}><Stack gap={3}><AppPageTabs value={value} items={[{"id":"/courses/overview","label":"Overview","href":"/courses/overview"},{"id":"/courses/practice","label":"Practice","href":"/courses/practice"},{"id":"/courses/reflection","label":"Reflection","href":"/courses/reflection","disabled":false}]} density="comfortable" label="Course routes"/></Stack></SGNavigationProvider>
</ThemeScope>
</>
);
}