74 lines
2.1 KiB
TypeScript
74 lines
2.1 KiB
TypeScript
import type { Component } from 'solid-js';
|
|
import type { RouteSectionProps } from '@solidjs/router';
|
|
import { createSignal } from 'solid-js';
|
|
import {
|
|
SSButton,
|
|
SSCallout,
|
|
SSDropdown,
|
|
SSShell,
|
|
} from 'src';
|
|
import {
|
|
IconBell,
|
|
IconChart,
|
|
IconDots,
|
|
IconLink,
|
|
IconSettings,
|
|
IconShield,
|
|
IconSpark,
|
|
IconBolt,
|
|
IconCheck,
|
|
} from '../../demo/content';
|
|
|
|
const ShellLayout: Component<RouteSectionProps> = (props) => {
|
|
const [notice, setNotice] = createSignal(false);
|
|
|
|
return (
|
|
<SSShell
|
|
title="Sortsys UI"
|
|
actions={
|
|
<div class="demo_inline">
|
|
<SSButton isIconOnly ariaLabel="Notifications">
|
|
<IconBell />
|
|
</SSButton>
|
|
<SSButton class="secondary">Export</SSButton>
|
|
<SSDropdown
|
|
icon={<IconDots />}
|
|
items={[
|
|
{ label: 'Settings', icon: <IconSettings /> },
|
|
{ label: 'Share', icon: <IconLink /> },
|
|
]}
|
|
/>
|
|
</div>
|
|
}
|
|
nav={
|
|
<SSShell.Nav>
|
|
<SSShell.NavLink href="/" icon={<IconSpark />}>Overview</SSShell.NavLink>
|
|
<SSShell.NavLink href="/forms" icon={<IconBolt />}>Forms</SSShell.NavLink>
|
|
<SSShell.NavLink href="/data" icon={<IconChart />}>Data</SSShell.NavLink>
|
|
<SSShell.NavLink href="/modals" icon={<IconShield />}>Modals</SSShell.NavLink>
|
|
<SSShell.NavGroup title="Layout" icon={<IconSettings />} initiallyExpanded>
|
|
<SSShell.NavLink href="/layout" icon={<IconLink />}>Surfaces & tiles</SSShell.NavLink>
|
|
</SSShell.NavGroup>
|
|
<SSShell.NavAction onclick={() => setNotice(true)} icon={<IconBell />}>
|
|
Ping team
|
|
</SSShell.NavAction>
|
|
</SSShell.Nav>
|
|
}
|
|
>
|
|
{notice() && (
|
|
<div class="demo_notice">
|
|
<SSCallout color="green" icon={<IconCheck />}>
|
|
Team notified. The update will appear in the activity feed.
|
|
</SSCallout>
|
|
<SSButton class="tertiary" onclick={() => setNotice(false)}>
|
|
Clear
|
|
</SSButton>
|
|
</div>
|
|
)}
|
|
{props.children}
|
|
</SSShell>
|
|
);
|
|
};
|
|
|
|
export default ShellLayout;
|