Skeleton

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

export function SkeletonDemo() {
    return (
        <div className="space-y-6">
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Avatar + lines</p>
                <div className="flex items-center gap-4">
                    <Skeleton className="size-12 rounded-full" />
                    <div className="space-y-2">
                        <Skeleton className="h-4 w-[250px]" />
                        <Skeleton className="h-4 w-[200px]" />
                    </div>
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Card</p>
                <div className="flex flex-col gap-3">
                    <Skeleton className="h-32 w-full max-w-xs rounded-lg" />
                    <Skeleton className="h-4 w-2/3" />
                    <Skeleton className="h-4 w-1/2" />
                </div>
            </div>
            <div className="space-y-2">
                <p className="text-xs font-medium text-muted-foreground">Text block</p>
                <div className="flex w-full max-w-xs flex-col gap-2">
                    <Skeleton className="h-4 w-full" />
                    <Skeleton className="h-4 w-full" />
                    <Skeleton className="h-4 w-3/4" />
                </div>
            </div>
        </div>
    );
}

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

@Component({
    selector: 'dl-skeleton-demo',
    standalone: true,
    imports: [HlmSkeletonImports],
    template: `
    <div class="space-y-6">
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Avatar + lines</p>
        <div class="flex items-center gap-4">
          <hlm-skeleton class="size-12 rounded-full" />
          <div class="space-y-2">
            <hlm-skeleton class="h-4 w-[250px]" />
            <hlm-skeleton class="h-4 w-[200px]" />
          </div>
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Card</p>
        <div class="flex flex-col gap-3">
          <hlm-skeleton class="h-32 w-full max-w-xs rounded-lg" />
          <hlm-skeleton class="h-4 w-2/3" />
          <hlm-skeleton class="h-4 w-1/2" />
        </div>
      </div>
      <div class="space-y-2">
        <p class="text-xs font-medium text-muted-foreground">Text block</p>
        <div class="flex w-full max-w-xs flex-col gap-2">
          <hlm-skeleton class="h-4 w-full" />
          <hlm-skeleton class="h-4 w-full" />
          <hlm-skeleton class="h-4 w-3/4" />
        </div>
      </div>
    </div>
  `,
})
export class SkeletonDemoComponent {}