initial commit

dev/routes/(shell)/layout.tsx

@@ -0,0 +1,61 @@
+import type { Component } from 'solid-js';
+import {
+  SSDivider,
+  SSExpandable,
+  SSHeader,
+  SSSurface,
+  SSTile,
+} from 'src';
+import { IconBolt, IconCheck, IconLink, IconShield } from '../../demo/content';
+
+const LayoutPage: Component = () => (
+  <div class="demo_page">
+    <SSHeader title="Layout" subtitle="Surfaces, tiles, and dividers." />
+
+    <SSSurface class="demo_surface">
+      <div class="demo_section_title">Surface stacks</div>
+      <div class="demo_grid">
+        <SSSurface class="demo_surface demo_surface--nested">
+          <div class="demo_section_title">Sub-surface</div>
+          <p class="demo_text">Perfect for grouped content, metrics, or compact forms.</p>
+        </SSSurface>
+        <SSSurface class="demo_surface demo_surface--nested">
+          <div class="demo_section_title">Another surface</div>
+          <p class="demo_text">Use consistent radii and subtle shadows for hierarchy.</p>
+        </SSSurface>
+      </div>
+    </SSSurface>
+
+    <SSSurface class="demo_surface">
+      <div class="demo_section_title">Tile list</div>
+      <div class="demo_tiles">
+        <SSTile
+          title="Integrations"
+          subtitle="24 connected services"
+          icon={<IconLink />}
+          trailing={<IconCheck />}
+        />
+        <SSTile
+          title="Automation"
+          subtitle="5 workflows running"
+          icon={<IconBolt />}
+          trailing="Live"
+        />
+        <SSTile
+          title="Security"
+          subtitle="Next scan Friday"
+          icon={<IconShield />}
+          trailing="Low risk"
+        />
+      </div>
+      <SSDivider />
+      <SSExpandable title="Notes">
+        <div class="demo_text">
+          Combine tiles with expandables to progressively reveal details.
+        </div>
+      </SSExpandable>
+    </SSSurface>
+  </div>
+);
+
+export default LayoutPage;