SidebarHeader

/** Canonical CSP-S6 SidebarHeader fixture — the rail's brand/workspace row. */
const sidebarHeaderFixture = {
  id: "sidebar-header",
  brand: "Northwind",
  plan: "PRO PLAN",
} satisfies {
  id: string;
  brand: string;
  plan: string;
};
 
import { Sidebar, SidebarHeader } from "@grassroot/ui-react";
 
export default function SidebarHeaderDemo() {
  return (
    <div>
      <Sidebar>
        <SidebarHeader>
          <span>{sidebarHeaderFixture.brand}</span>
          <span>{sidebarHeaderFixture.plan}</span>
        </SidebarHeader>
      </Sidebar>
    </div>
  );
}

<script setup lang="ts">
/** Canonical CSP-S6 SidebarHeader fixture — the rail's brand/workspace row. */
const sidebarHeaderFixture = {
  id: "sidebar-header",
  brand: "Northwind",
  plan: "PRO PLAN",
} satisfies {
  id: string;
  brand: string;
  plan: string;
};
 
import { Sidebar, SidebarHeader } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Sidebar>
      <SidebarHeader>
        <span>{{ sidebarHeaderFixture.brand }}</span>
        <span>{{ sidebarHeaderFixture.plan }}</span>
      </SidebarHeader>
    </Sidebar>
  </div>
</template>

import { Component } from "@angular/core";
/** Canonical CSP-S6 SidebarHeader fixture — the rail's brand/workspace row. */
const sidebarHeaderFixture = {
  id: "sidebar-header",
  brand: "Northwind",
  plan: "PRO PLAN",
} satisfies {
  id: string;
  brand: string;
  plan: string;
};
 
import { GrassrootSidebar, GrassrootSidebarHeader } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-sidebar-header-demo",
  standalone: true,
  imports: [GrassrootSidebar, GrassrootSidebarHeader],
  template: `
    <div>
      <grassroot-sidebar>
        <grassroot-sidebar-header>
          <span>{{ fixture.brand }}</span>
          <span>{{ fixture.plan }}</span>
        </grassroot-sidebar-header>
      </grassroot-sidebar>
    </div>
  `,
})
export class SidebarHeaderDemoComponent {
  protected readonly fixture = sidebarHeaderFixture;
}
 
export default SidebarHeaderDemoComponent;

<script lang="ts">
  /** Canonical CSP-S6 SidebarHeader fixture — the rail's brand/workspace row. */
  const sidebarHeaderFixture = {
    id: "sidebar-header",
    brand: "Northwind",
    plan: "PRO PLAN",
  } satisfies {
    id: string;
    brand: string;
    plan: string;
  };
 
  import { Sidebar, SidebarHeader } from "@grassroot/ui-svelte";
</script>
 
<div>
  <Sidebar>
    {#snippet children()}
      <SidebarHeader>
        {#snippet children()}
          <span>{sidebarHeaderFixture.brand}</span><span>{sidebarHeaderFixture.plan}</span>
        {/snippet}
      </SidebarHeader>
    {/snippet}
  </Sidebar>
</div>

/** @jsxImportSource solid-js */
import type { JSX } from "solid-js";
/** Canonical CSP-S6 SidebarHeader fixture — the rail's brand/workspace row. */
const sidebarHeaderFixture = {
  id: "sidebar-header",
  brand: "Northwind",
  plan: "PRO PLAN",
} satisfies {
  id: string;
  brand: string;
  plan: string;
};
 
import { Sidebar, SidebarHeader } from "@grassroot/ui-solid";
 
export default function SidebarHeaderDemo(): JSX.Element {
  return (
    <div>
      <Sidebar>
        <SidebarHeader>
          <span>{sidebarHeaderFixture.brand}</span>
          <span>{sidebarHeaderFixture.plan}</span>
        </SidebarHeader>
      </Sidebar>
    </div>
  );
}