This commit is contained in:
Ludwig Lehnert
202
dev/routes/(shell)/index.tsx
Normal file
202
dev/routes/(shell)/index.tsx
Normal file
@@ -0,0 +1,202 @@
|
||||
import type { Component } from 'solid-js';
|
||||
import { For, createSignal } from 'solid-js';
|
||||
import {
|
||||
SSAttrList,
|
||||
SSButton,
|
||||
SSCallout,
|
||||
SSChip,
|
||||
SSDivider,
|
||||
SSDropdown,
|
||||
SSExpandable,
|
||||
SSHeader,
|
||||
SSSurface,
|
||||
SSTile,
|
||||
} from 'src';
|
||||
import {
|
||||
IconBolt,
|
||||
IconChart,
|
||||
IconDots,
|
||||
IconLink,
|
||||
IconSettings,
|
||||
IconShield,
|
||||
IconSpark,
|
||||
IconUser,
|
||||
IconBell,
|
||||
IconCheck,
|
||||
} from '../../demo/content';
|
||||
|
||||
const OverviewPage: Component = () => {
|
||||
const [bannerVisible, setBannerVisible] = createSignal(true);
|
||||
const [chipItems, setChipItems] = createSignal([
|
||||
{ id: 'launch', label: 'Launch ready', color: 'green' },
|
||||
{ id: 'urgent', label: 'Urgent', color: 'red' },
|
||||
{ id: 'info', label: 'Info', color: 'blue' },
|
||||
]);
|
||||
|
||||
return (
|
||||
<div class="demo_page">
|
||||
<SSHeader
|
||||
title="Sortsys UI"
|
||||
subtitle="A crisp SolidJS component suite for operational products."
|
||||
actions={
|
||||
<div class="demo_inline">
|
||||
<SSButton class="secondary">Preview</SSButton>
|
||||
<SSButton>Publish</SSButton>
|
||||
<SSDropdown
|
||||
ariaLabel="Aktionen"
|
||||
icon={<IconDots />}
|
||||
items={[
|
||||
{ label: 'Duplicate', icon: <IconSpark /> },
|
||||
{ label: 'Share link', icon: <IconLink />, checked: true },
|
||||
{ label: 'Archive', icon: <IconShield /> },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
|
||||
{bannerVisible() && (
|
||||
<div class="demo_notice">
|
||||
<SSCallout color="blue" icon={<IconSpark />}>
|
||||
A fresh demo layout that shows every component in context.
|
||||
</SSCallout>
|
||||
<SSButton class="tertiary" onclick={() => setBannerVisible(false)}>
|
||||
Dismiss
|
||||
</SSButton>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="demo_grid">
|
||||
<SSSurface class="demo_surface">
|
||||
<div class="demo_section_title">Status tiles</div>
|
||||
<div class="demo_tiles">
|
||||
<SSTile
|
||||
title="Design review"
|
||||
subtitle="Last updated 2 hours ago"
|
||||
icon={<IconSpark />}
|
||||
trailing="92%"
|
||||
/>
|
||||
<SSTile
|
||||
title="Security sweep"
|
||||
subtitle="Next window tomorrow"
|
||||
icon={<IconShield />}
|
||||
trailing="4 issues"
|
||||
/>
|
||||
<SSTile
|
||||
title="Capacity"
|
||||
subtitle="Quarterly planning"
|
||||
icon={<IconChart />}
|
||||
trailing="14 slots"
|
||||
/>
|
||||
</div>
|
||||
</SSSurface>
|
||||
|
||||
<SSSurface class="demo_surface">
|
||||
<div class="demo_section_title">Quick actions</div>
|
||||
<div class="demo_buttons">
|
||||
<SSButton>Primary action</SSButton>
|
||||
<SSButton class="secondary">Secondary</SSButton>
|
||||
<SSButton class="tertiary">Tertiary</SSButton>
|
||||
<SSButton class="danger">Danger</SSButton>
|
||||
<SSButton isIconOnly ariaLabel="Notifications">
|
||||
<IconBell />
|
||||
</SSButton>
|
||||
</div>
|
||||
|
||||
<SSDivider />
|
||||
|
||||
<div class="demo_section_title">Chips</div>
|
||||
<div class="demo_chips">
|
||||
<For each={chipItems()}>
|
||||
{(item) => (
|
||||
<SSChip
|
||||
color={item.color as any}
|
||||
ondismiss={() =>
|
||||
setChipItems((prev) => prev.filter((chip) => chip.id !== item.id))
|
||||
}
|
||||
>
|
||||
{item.label}
|
||||
</SSChip>
|
||||
)}
|
||||
</For>
|
||||
<SSChip color="purple" onclick={() => {}}>
|
||||
Clickable
|
||||
</SSChip>
|
||||
<SSChip color="amber">Display only</SSChip>
|
||||
</div>
|
||||
</SSSurface>
|
||||
</div>
|
||||
|
||||
<SSSurface class="demo_surface">
|
||||
<div class="demo_section_title">Attribute list</div>
|
||||
<SSAttrList>
|
||||
<SSAttrList.Attr
|
||||
name="Lifecycle"
|
||||
value="Production"
|
||||
third={
|
||||
<SSButton isIconOnly class="tertiary" ariaLabel="Edit">
|
||||
<IconSettings />
|
||||
</SSButton>
|
||||
}
|
||||
/>
|
||||
<SSAttrList.Attr
|
||||
name="Owner"
|
||||
value="Customer Ops"
|
||||
third="2 teams, 6 contributors"
|
||||
/>
|
||||
<SSAttrList.Attr name="Uptime" value="99.98%" third="Rolling 30 days" />
|
||||
<SSAttrList.Attr name="Latency" value="142ms avg" third="p95 down 12%" />
|
||||
<SSAttrList.Attr
|
||||
name="Alerts"
|
||||
value="2 open"
|
||||
third="1 critical"
|
||||
/>
|
||||
<SSAttrList.Attr
|
||||
name="Risk"
|
||||
value="Low"
|
||||
third="Review passed"
|
||||
/>
|
||||
</SSAttrList>
|
||||
</SSSurface>
|
||||
|
||||
<div class="demo_grid">
|
||||
<SSSurface class="demo_surface">
|
||||
<div class="demo_section_title">Callouts</div>
|
||||
<div class="demo_stack">
|
||||
<SSCallout color="green" icon={<IconCheck />}>
|
||||
All services are green. Next audit is scheduled for Friday.
|
||||
</SSCallout>
|
||||
<SSCallout color="amber" icon={<IconBolt />}>
|
||||
2 alerts are pending review in the on-call queue.
|
||||
</SSCallout>
|
||||
<SSCallout color="red" icon={<IconShield />}>
|
||||
Credentials rotation required within 14 days.
|
||||
</SSCallout>
|
||||
</div>
|
||||
</SSSurface>
|
||||
|
||||
<SSSurface class="demo_surface">
|
||||
<div class="demo_section_title">Expandable</div>
|
||||
<SSExpandable title="Deployment checklist" initiallyExpanded>
|
||||
<div class="demo_stack">
|
||||
<div class="demo_inline">
|
||||
<IconCheck />
|
||||
<span>Review release notes and merge outstanding fixes.</span>
|
||||
</div>
|
||||
<div class="demo_inline">
|
||||
<IconCheck />
|
||||
<span>Warm up cache nodes and verify rollout.</span>
|
||||
</div>
|
||||
<div class="demo_inline">
|
||||
<IconCheck />
|
||||
<span>Post update to #ops and notify stakeholders.</span>
|
||||
</div>
|
||||
</div>
|
||||
</SSExpandable>
|
||||
</SSSurface>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default OverviewPage;
|
||||
Reference in New Issue
Block a user