SidebarFooter

/** Canonical CSP-S6 SidebarFooter fixture — the rail's account/env row. */
const sidebarFooterFixture = {
  id: "sidebar-footer",
  environment: "prod · us-east-1",
  account: "Alex Mercer",
  initials: "AM",
} satisfies {
  id: string;
  environment: string;
  account: string;
  initials: string;
};
 
import { Sidebar, SidebarFooter } from "@grassroot/ui-react";
 
export default function SidebarFooterDemo() {
  return (
    <div>
      <Sidebar>
        <SidebarFooter>
          <span>{sidebarFooterFixture.environment}</span>
          <span>{sidebarFooterFixture.initials}</span>
          <span>{sidebarFooterFixture.account}</span>
        </SidebarFooter>
      </Sidebar>
    </div>
  );
}

<script setup lang="ts">
/** Canonical CSP-S6 SidebarFooter fixture — the rail's account/env row. */
const sidebarFooterFixture = {
  id: "sidebar-footer",
  environment: "prod · us-east-1",
  account: "Alex Mercer",
  initials: "AM",
} satisfies {
  id: string;
  environment: string;
  account: string;
  initials: string;
};
 
import { Sidebar, SidebarFooter } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Sidebar>
      <SidebarFooter>
        <span>{{ sidebarFooterFixture.environment }}</span>
        <span>{{ sidebarFooterFixture.initials }}</span>
        <span>{{ sidebarFooterFixture.account }}</span>
      </SidebarFooter>
    </Sidebar>
  </div>
</template>

import { Component } from "@angular/core";
/** Canonical CSP-S6 SidebarFooter fixture — the rail's account/env row. */
const sidebarFooterFixture = {
  id: "sidebar-footer",
  environment: "prod · us-east-1",
  account: "Alex Mercer",
  initials: "AM",
} satisfies {
  id: string;
  environment: string;
  account: string;
  initials: string;
};
 
import { GrassrootSidebar, GrassrootSidebarFooter } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-sidebar-footer-demo",
  standalone: true,
  imports: [GrassrootSidebar, GrassrootSidebarFooter],
  template: `
    <div>
      <grassroot-sidebar>
        <grassroot-sidebar-footer>
          <span>{{ fixture.environment }}</span>
          <span>{{ fixture.initials }}</span>
          <span>{{ fixture.account }}</span>
        </grassroot-sidebar-footer>
      </grassroot-sidebar>
    </div>
  `,
})
export class SidebarFooterDemoComponent {
  protected readonly fixture = sidebarFooterFixture;
}
 
export default SidebarFooterDemoComponent;

<script lang="ts">
  /** Canonical CSP-S6 SidebarFooter fixture — the rail's account/env row. */
  const sidebarFooterFixture = {
    id: "sidebar-footer",
    environment: "prod · us-east-1",
    account: "Alex Mercer",
    initials: "AM",
  } satisfies {
    id: string;
    environment: string;
    account: string;
    initials: string;
  };
 
  import { Sidebar, SidebarFooter } from "@grassroot/ui-svelte";
</script>
 
<div>
  <Sidebar>
    {#snippet children()}
      <SidebarFooter>
        {#snippet children()}
          <span>{sidebarFooterFixture.environment}</span><span>{sidebarFooterFixture.initials}</span
          ><span>{sidebarFooterFixture.account}</span>
        {/snippet}
      </SidebarFooter>
    {/snippet}
  </Sidebar>
</div>

/** @jsxImportSource solid-js */
import type { JSX } from "solid-js";
/** Canonical CSP-S6 SidebarFooter fixture — the rail's account/env row. */
const sidebarFooterFixture = {
  id: "sidebar-footer",
  environment: "prod · us-east-1",
  account: "Alex Mercer",
  initials: "AM",
} satisfies {
  id: string;
  environment: string;
  account: string;
  initials: string;
};
 
import { Sidebar, SidebarFooter } from "@grassroot/ui-solid";
 
export default function SidebarFooterDemo(): JSX.Element {
  return (
    <div>
      <Sidebar>
        <SidebarFooter>
          <span>{sidebarFooterFixture.environment}</span>
          <span>{sidebarFooterFixture.initials}</span>
          <span>{sidebarFooterFixture.account}</span>
        </SidebarFooter>
      </Sidebar>
    </div>
  );
}