bandolier-template/admin/bando/Components.svelte

<script>
  import Accordion from "./demos/Accordion.svelte";
  import AspectRatio from "./demos/AspectRatio.svelte";
  import Badge from "./demos/Badge.svelte";
  import ButtonGroup from "./demos/ButtonGroup.svelte";
  import Calendar from "./demos/Calendar.svelte";
  import Callout from "./demos/Callout.svelte";
  import Cards from "./demos/Cards.svelte";
  import Carousel from "./demos/Carousel.svelte";
  import Chat from "./demos/Chat.svelte";
  import Code from "$/client/components/Code.svelte";
  import CodeDemo from "./demos/Code.svelte";
  import CodeFormatter from "$/client/components/CodeFormatter.svelte";
  import Countdown from "./demos/Countdown.svelte";
  import Darkmode from "./demos/Darkmode.svelte";
  import DataTable from "./demos/DataTable.svelte";
  import FairPay from "./demos/FairPay.svelte";
  import Flipper from "./demos/Flipper.svelte";
  import Form from "./demos/Form.svelte";
  import HLSVideo from "./demos/HLSVideo.svelte";
  import Icon from "$client/components/Icon.svelte";
  import IconDemo from "./demos/Icon.svelte";
  import IconImage from "./demos/IconImage.svelte";
  import LiveStream from "./demos/LiveStream.svelte";
  import LoggedIn from "./demos/LoggedIn.svelte";
  import Login from "./demos/Login.svelte";
  import Markdown from "$/client/components/Markdown.svelte";
  import MarkdownDemo from "./demos/Markdown.svelte";
  import Modal from "./demos/Modal.svelte";
  import OGPreview from "./demos/OGPreview.svelte";
  import Pagination from "./demos/Pagination.svelte";
  import PlaceHolder from "./demos/PlaceHolder.svelte";
  import Progress from "./demos/Progress.svelte";
  import Sidebar from "$/client/components/Sidebar.svelte";
  import SidebarCSS from "./demos/SidebarCSS.svelte";
  import SidebarDemo from "./demos/Sidebar.svelte";
  import SnapImage from "./demos/SnapImage.svelte";
  import Spinner from "./demos/Spinner.svelte";
  import StackLayer from "./demos/StackLayer.svelte";
  import Switch from "./demos/Switch.svelte";
  import Tabs from "./demos/Tabs.svelte";
  import Tiles from "./demos/Tiles.svelte";
  import Toast from "./demos/Toast.svelte";
  import Toastier from "./demos/Toastier.svelte";
  import Tooltip from "./demos/Tooltip.svelte";
  import Video from "./demos/Video.svelte";
  import WTVideo from "./demos/WTVideo.svelte";

  import Layout from "../Layout.svelte";
  import { link, replace } from "svelte-spa-router";

  export let params = {};


  /* WARNING: If you put any component that uses /api/login into the first slot
   * or set active: true on them it will require a login.
   */
  let panels = [
      {title: "Accordion", active: false, icon: "align-justify", component: Accordion},
      {title: "AspectRatio", active: false, icon: "copy", component: AspectRatio},
      {title: "Badge", active: false, icon: "award", component: Badge},
      {title: "ButtonGroup", active: false, icon: "server", component: ButtonGroup},
      {title: "Calendar", active: false, icon: "calendar", component: Calendar},
      {title: "Callout", active: false, icon: "file-plus", component: Callout},
      {title: "Cards", active: false, icon: "credit-card", component: Cards},
      {title: "Carousel", active: false, icon: "repeat", component: Carousel},
      {title: "Chat", active: false, icon: "message-circle", component: Chat},
      {title: "Code", active: false, icon: "code", component: CodeDemo},
      {title: "Countdown", active: false, icon: "clock", component: Countdown},
      {title: "Darkmode", active: false, icon: "sunrise", component: Darkmode},
      {title: "DataTable", active: false, icon: "grid", component: DataTable},
      {title: "FairPay", active: false, icon: "dollar-sign", component: FairPay},
      {title: "Flipper", active: false, icon: "layers", component: Flipper},
      {title: "Form", active: false, icon: "database", component: Form},
      {title: "Icon", active: false, icon: "feather", component: IconDemo},
      {title: "IconImage", active: false, icon: "image", component: IconImage},
      {title: "LiveStream", active: false, icon: "cast", component: LiveStream},
      {title: "LoggedIn", active: false, icon: "log-out", component: LoggedIn},
      {title: "Login", active: false, icon: "log-in", component: Login},
      {title: "Markdown", active: false, icon: "file", component: MarkdownDemo},
      {title: "Modal", active: false, icon: "maximize", component: Modal},
      {title: "OGPreview", active: false, icon: "external-link", component: OGPreview},
      {title: "Pagination", active: false, icon: "skip-forward", component: Pagination},
      {title: "PlaceHolder", active: false, icon: "image", component: PlaceHolder},
      {title: "Progress", active: false, icon: "thermometer", component: Progress},
      {title: "Sidebar", active: false, icon: "sidebar", component: SidebarDemo},
      {title: "SidebarCSS", active: false, icon: "sidebar", component: SidebarCSS},
      {title: "SnapImage", active: false, icon: "camera", component: SnapImage},
      {title: "Spinner", active: false, icon: "rotate-cw", component: Spinner},
      {title: "StackLayer", active: false, icon: "layers", component: StackLayer},
      {title: "Switch", active: false, icon: "check-square", component: Switch},
      {title: "Tabs", active: false, icon: "folder", component: Tabs},
      {title: "Tiles", active: false, icon: "camera", component: Tiles},
      {title: "Toast", active: false, icon: "message-square", component: Toast},
      {title: "Toastier", active: false, icon: "message-square", component: Toastier},
      {title: "Tooltip", active: false, icon: "help-circle", component: Tooltip},
      {title: "HLSVideo", active: false, icon: "video", component: HLSVideo},
      {title: "Video", active: false, icon: "video", component: Video},
      {title: "WTVideo", active: false, icon: "video", component: WTVideo},
  ];

  panels.forEach(p => (p.code = p.code || `/bando/demos/${p.title}.svelte`));

  const select_named = () => {
    if(params.name) {
      return panels.find(p => p.title === params.name) || panels[0];
    } else {
      return panels[0];
    }
  }

  let selected = select_named();
  selected.active = true;
  let show = "DEMO";

  const load_docs = async (from) => {
    const res = await fetch(`${from.code}.md`);
    return res.status == 200 ? res.text() : undefined;
  }

  const sidebar_select = (event) => {
    const {index, item} = event.detail;
    show = "DEMO";

    selected = item;

    panels = panels.map((x, i) => {
      x.active = i == index;
      return x;
    });

    replace(`/bando/components/${selected.title}/`);
  }
</script>

<style>
  div[slot="top"] span {
    display: none;
  }

  contents {
    padding: 0.5rem;
    width: 100%;
    max-height: 100vh;
    overflow-y: auto;
  }

  tabs {
    margin-bottom: 1rem;
  }

  @media only screen and (max-width: 900px) {
    div[slot="top"] h3 {
      display: none;
    }

    div[slot="top"] span {
      display: inline-block;
      padding-top: 0.3rem;
    }

    div[slot="bottom"] {
      display: none;
    }
  }

  left {
    max-height: 100vh;
    overflow-y: auto;
    overflow-x: hidden;
    max-width: min-content;
    width: min-content;
    min-width: min-content;
  }
</style>

<Layout fullscreen={ true } header={false} footer={ false } testid="page-bando-demos">
  <left>
    <Sidebar on:select={ sidebar_select } menu={ panels }>
      <div slot="top">
        <h3><a href="/" use:link><Icon name="arrow-left-circle" /> Components</h3>
        <span><Icon name="home" size="36" /></span>
      </div>

      <div slot="bottom">
        <p>Code is in <b>client/bando/demos</b></p>
      </div>
    </Sidebar>
  </left>

  <contents>
    <tabs>
      <a data-testid="tab-demo" class:active={ show == "DEMO" } on:click={ () => show = "DEMO" }>
        <Icon name="eye" size="36px"/> Demo
      </a>

      <a data-testid="tab-docs" class:active={ show == "DOCS" } on:click={ () => show = "DOCS" }>
        <Icon name="book-open" size="36px"/> Docs
      </a>

      <a data-testid="tab-code" class:active={ show == "CODE" } on:click={ () => show = "CODE" }>
        <Icon name="code" size="36px" /> Code
      </a>
    </tabs>
    <component data-testid="demo-{ selected.title }">
      {#if show == "CODE"}
        <Code src={ selected.code } language="javascript" />
      {:else if show == "DOCS"}
        {#await load_docs(selected) then docs }
          {#if docs}
            <Markdown content={ docs } />
          {:else}
            <h1>No Docs</h1>
            <p>This component is not documented yet.</p>
          {/if}
        {/await}
      {:else}
        <h1>{selected.title}</h1>
        <svelte:component this={selected.component} />
      {/if}
    </component>
  </contents>
</Layout>
<CodeFormatter />