62 lines
1.8 KiB
TypeScript
62 lines
1.8 KiB
TypeScript
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;
|