sortsys-ui/dev/routes/(shell)/index.tsx

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;