Separator

import {Separator} from '@stroeer-labs/design-library/react';

export function SeparatorDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Horizontal</p>
                <div>
                    <p className="text-sm font-medium">Design Library</p>
                    <p className="text-sm text-muted-foreground">Tokens, React &amp; Angular components.</p>
                    <Separator className="my-4" />
                    <div className="flex h-5 items-center gap-4 text-sm">
                        <span>Blog</span>
                        <Separator orientation="vertical" />
                        <span>Docs</span>
                        <Separator orientation="vertical" />
                        <span>Source</span>
                    </div>
                </div>
            </div>
        </div>
    );
}

import {Component} from '@angular/core';
import {HlmSeparatorImports} from '@stroeer-labs/design-library/angular';

@Component({
    selector: 'dl-separator-demo',
    standalone: true,
    imports: [HlmSeparatorImports],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Horizontal</p>
        <div>
          <p class="text-sm font-medium">Design Library</p>
          <p class="text-sm text-muted-foreground">Tokens, React &amp; Angular components.</p>
          <hlm-separator class="my-4" />
          <div class="flex h-5 items-center gap-4 text-sm">
            <span>Blog</span>
            <hlm-separator orientation="vertical" />
            <span>Docs</span>
            <hlm-separator orientation="vertical" />
            <span>Source</span>
          </div>
        </div>
      </div>
    </div>
  `,
})
export class SeparatorDemoComponent {}