import type { Component } from 'solid-js';
import { SSButton, SSCallout, SSHeader, SSSurface } from 'src';
import { IconShield } from '../../demo/content';

const NotFoundPage: Component = () => (
  <div class="demo_page">
    <SSHeader title="Not found" subtitle="This route is not available in the demo." />
    <SSSurface class="demo_surface">
      <SSCallout color="amber" icon={<IconShield />}>
        The page you requested does not exist. Head back to the overview to continue exploring.
      </SSCallout>
      <SSButton onclick={() => (window.location.href = '#/')}>Back to overview</SSButton>
    </SSSurface>
  </div>
);

export default NotFoundPage;