Separator

const separatorFixture = {
  id: "separator",
  variants: [
    { id: "horizontal", orientation: "horizontal" },
    { id: "vertical", orientation: "vertical" },
    { id: "labelled", orientation: "horizontal", label: "Section 02" },
  ],
} satisfies {
  id: string;
  variants: Array<{
    id: string;
    orientation: "horizontal" | "vertical";
    label?: string;
  }>;
};
 
import { Separator } from "@grassroot/ui-react";
 
export default function SeparatorDemo() {
  return (
    <div>
      {separatorFixture.variants.map((variant) => (
        <Separator key={variant.id} orientation={variant.orientation} label={variant.label} />
      ))}
    </div>
  );
}

<script setup lang="ts">
const separatorFixture = {
  id: "separator",
  variants: [
    { id: "horizontal", orientation: "horizontal" },
    { id: "vertical", orientation: "vertical" },
    { id: "labelled", orientation: "horizontal", label: "Section 02" },
  ],
} satisfies {
  id: string;
  variants: Array<{
    id: string;
    orientation: "horizontal" | "vertical";
    label?: string;
  }>;
};
 
import { Separator } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <template v-for="variant in separatorFixture.variants" :key="variant.id">
      <Separator v-if="variant.label" :orientation="variant.orientation">
        <template #label>{{ variant.label }}</template>
      </Separator>
      <Separator v-else :orientation="variant.orientation" />
    </template>
  </div>
</template>

import { Component } from "@angular/core";
const separatorFixture = {
  id: "separator",
  variants: [
    { id: "horizontal", orientation: "horizontal" },
    { id: "vertical", orientation: "vertical" },
    { id: "labelled", orientation: "horizontal", label: "Section 02" },
  ],
} satisfies {
  id: string;
  variants: Array<{
    id: string;
    orientation: "horizontal" | "vertical";
    label?: string;
  }>;
};
 
import { GrassrootSeparator, GrassrootSeparatorLabel } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-separator-demo",
  standalone: true,
  imports: [GrassrootSeparator, GrassrootSeparatorLabel],
  template: `
    <div>
      @for (variant of fixture.variants; track variant.id) {
        @if (variant.label) {
          <div grassrootSeparator [orientation]="variant.orientation">
            <span grassrootSeparatorLabel>{{ variant.label }}</span>
          </div>
        } @else {
          <div grassrootSeparator [orientation]="variant.orientation"></div>
        }
      }
    </div>
  `,
})
export class SeparatorDemoComponent {
  protected readonly fixture = separatorFixture;
}
 
export default SeparatorDemoComponent;

<script lang="ts">
  const separatorFixture = {
    id: "separator",
    variants: [
      { id: "horizontal", orientation: "horizontal" },
      { id: "vertical", orientation: "vertical" },
      { id: "labelled", orientation: "horizontal", label: "Section 02" },
    ],
  } satisfies {
    id: string;
    variants: Array<{
      id: string;
      orientation: "horizontal" | "vertical";
      label?: string;
    }>;
  };
 
  import { Separator } from "@grassroot/ui-svelte";
</script>
 
<div>
  {#each separatorFixture.variants as variant (variant.id)}
    {#if variant.label}
      {#snippet label()}{variant.label}{/snippet}
      <Separator orientation={variant.orientation} {label} />
    {:else}
      <Separator orientation={variant.orientation} />
    {/if}
  {/each}
</div>

/** @jsxImportSource solid-js */
const separatorFixture = {
  id: "separator",
  variants: [
    { id: "horizontal", orientation: "horizontal" },
    { id: "vertical", orientation: "vertical" },
    { id: "labelled", orientation: "horizontal", label: "Section 02" },
  ],
} satisfies {
  id: string;
  variants: Array<{
    id: string;
    orientation: "horizontal" | "vertical";
    label?: string;
  }>;
};
 
import { Separator } from "@grassroot/ui-solid";
import type { JSX } from "solid-js";
 
export default function SeparatorDemo(): JSX.Element {
  return (
    <div>
      {separatorFixture.variants.map((variant) => (
        <Separator orientation={variant.orientation} label={variant.label} />
      ))}
    </div>
  );
}