initial commit

dev/routes/(shell)/_layout.tsx

@@ -0,0 +1,73 @@
+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;