Skeleton

const skeletonFixture = {
  id: "skeleton",
  avatarSize: "h-10 w-10",
  lineSizes: ["h-3 w-3/4", "h-3 w-1/2"],
} satisfies { id: string; avatarSize: string; lineSizes: string[] };
 
import { Skeleton } from "@grassroot/ui-react";
 
export default function SkeletonDemo() {
  return (
    <div>
      <Skeleton circle className={skeletonFixture.avatarSize} />
      {skeletonFixture.lineSizes.map((size) => (
        <Skeleton key={size} className={size} />
      ))}
    </div>
  );
}

<script setup lang="ts">
const skeletonFixture = {
  id: "skeleton",
  avatarSize: "h-10 w-10",
  lineSizes: ["h-3 w-3/4", "h-3 w-1/2"],
} satisfies { id: string; avatarSize: string; lineSizes: string[] };
 
import { Skeleton } from "@grassroot/ui-vue";
</script>
 
<template>
  <div>
    <Skeleton circle :class-name="skeletonFixture.avatarSize" />
    <Skeleton v-for="size in skeletonFixture.lineSizes" :key="size" :class-name="size" />
  </div>
</template>

import { Component } from "@angular/core";
const skeletonFixture = {
  id: "skeleton",
  avatarSize: "h-10 w-10",
  lineSizes: ["h-3 w-3/4", "h-3 w-1/2"],
} satisfies { id: string; avatarSize: string; lineSizes: string[] };
 
import { GrassrootSkeleton } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-skeleton-demo",
  standalone: true,
  imports: [GrassrootSkeleton],
  template: `
    <div>
      <grassroot-skeleton [circle]="true" [className]="fixture.avatarSize" />
      @for (size of fixture.lineSizes; track size) {
        <grassroot-skeleton [className]="size" />
      }
    </div>
  `,
})
export class SkeletonDemoComponent {
  protected readonly fixture = skeletonFixture;
}
 
export default SkeletonDemoComponent;

<script lang="ts">
  import { Skeleton } from "@grassroot/ui-svelte";
  const skeletonFixture = {
    id: "skeleton",
    avatarSize: "h-10 w-10",
    lineSizes: ["h-3 w-3/4", "h-3 w-1/2"],
  } satisfies { id: string; avatarSize: string; lineSizes: string[] };
 
  </script>
 
<div>
  <Skeleton circle className={skeletonFixture.avatarSize} />
  {#each skeletonFixture.lineSizes as size (size)}
    <Skeleton className={size} />
  {/each}
</div>

/** @jsxImportSource solid-js */
import { Skeleton } from "@grassroot/ui-solid";
const skeletonFixture = {
  id: "skeleton",
  avatarSize: "h-10 w-10",
  lineSizes: ["h-3 w-3/4", "h-3 w-1/2"],
} satisfies { id: string; avatarSize: string; lineSizes: string[] };
 
export default function SkeletonDemo() {
  return (
    <div>
      <Skeleton circle className={skeletonFixture.avatarSize} />
      {skeletonFixture.lineSizes.map((size) => (
        <Skeleton className={size} />
      ))}
    </div>
  );
}